writofmandamus writofmandamus -4 years ago 200
React JSX Question

Unable to load/require any css files in Node

I have a ReactJS application based off of this boilerplate.

I am simply trying to load and

require
or
import
a css file (to be embedded in
<style>
tag, as opposed to css link). Below are the two methods I have tried, and not ever both at the same time.

Method 1: Configure loaders in Webpack



These are all the loader configurations I have tried, but still resulted in this error:
[require-hacker] Trying to load "something.css" as a "*.js"


dev.config.js

module: {
loaders: [
// loaders in here
]
}



  1. { test: /\.css$/, loader: "style!css" }

  2. { test: /\.css$/, loader: 'style-loader!css-loader'}
    from here

  3. { test: /\.css$/, loader: 'style!css!postcss' }

  4. { test: /\.css$/, loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]!postcss' }

  5. { test: /\.css$/,
    use: [
    {
    loader: 'css-loader',
    options: {
    modules: true,
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
    }
    }
    ]
    }

  6. {
    test: /\.css$/,
    loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap'
    },



Method 2: Use loaders directly



If I remove the css loaders altogether, and instead call
require('style!css!./something.css')
, I get this error:

Error: Cannot find module 'style!css!./something.css'


---- # NOTE: ----

I am able to properly
require
my
.scss
files and its webpack loader configuration is below. But for some reason my css files don't want to play that way too.

{ test: /\.scss$/,
loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap' }

Answer Source

change extensions: ['less','scss'] to extensions: ['less','scss','css'] in webpack-isomorphic-tools.js at line 65.for more details you can see this

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download