CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack
writofmandamus
writofmandamus

Reputation: 1231

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' }

Upvotes: 2

Views: 269

Answers (1)

holi-java
holi-java

Reputation: 30686

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

Upvotes: 2

Related Questions