webpack sass loader not working

Question

I've spent about 5 hours in total trying to fix this. I'm trying to add scss support to my node app, but it keeps showing the same error:

/Users/jamesoe/projects/-frontend/build/server/bundle.js:3160
[1] throw new Error("Module parse failed: /Users/jamesoe/projects/-frontend/ui/style/index.scss Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n| .x {\n|   display: none;\n| }");
[1] ^
[1]
[1] Error: Module parse failed: /Users/jamesoe/projects/-frontend/ui/style/index.scss Unexpected token (1:0)
[1] You may need an appropriate loader to handle this file type.
[1] | .x {
[1] |   display: none;
[1] | }
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:3160:7)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.defineProperty.value (/Users/jamesoe/projects/-frontend/build/server/bundle.js:2610:1)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.defineProperty.value (/Users/jamesoe/projects/-frontend/build/server/bundle.js:405:17)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:3237:15)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at /Users/jamesoe/projects/-frontend/build/server/bundle.js:66:18
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:69:10)

I have added a simple style to the index.scss file & it's failing?

Here is my webpack.config.client.js file:

const webpack = require('webpack');

const DEV = process.env.NODE_ENV !== 'production';

module.exports = {
  bail: !DEV,
  devtool: DEV ? 'cheap-module-source-map' : 'source-map',
  entry: './ui/client.js',
  output: {
    path: 'build/client',
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    loaders: [{
      test: /\.css/,
      loader: 'style-loader!css-loader',
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/,
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    },
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
    {
      test: /\.scss$/,
      use: [{
        loader: 'style-loader' // creates style nodes from JS strings
      }, {
        loader: 'css-loader' // translates CSS into CommonJS
      }, {
        loader: 'sass-loader?sourceMap' // compiles Sass to CSS
      }]
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(DEV ? 'development' : 'production'),
      },
    }),
    DEV && new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true, // React doesn't support IE8
        warnings: false,
      },
      mangle: {
        screw_ie8: true,
      },
      output: {
        comments: true,
        screw_ie8: true,
      },
    }),
    DEV && new webpack.optimize.AggressiveMergingPlugin(),
  ].filter(Boolean),
};

I have tried other node-sass webpack solutions, but haven't been able to get any to work.

Note:

I noticed that if I do:

test: /\.css/,
loader: 'style-loader!css-loader!sass-loader',

and remove the .scss test object, it will compile any sass that I add into the .css file...so then I did: test: /\.(scss|css)$/, & it is failing throwing the same error as above.

I don't believe that the sass-loader will generate a .css file, but it will inject your CSS in Javascript at runtime. If you want a .css file to be used, I believe you need to use the "ExtractTextPlugin" to generate the css from scss. I got this info from https://stackoverflow.com/questions/32211231/webpack-sass-loader-not-generating-a-css-file and their docs:https://github.com/webpack-contrib/sass-loader. How are you trying to receive the scss/css on the front end? Is it with React or another framework? — Dream_Cap, Jul 14 '17 at 05:50
You config looks right. Are you sure that you did `npm i sass-loader node-sass --save-dev`? — Stanislav Mayorov, Jul 14 '17 at 13:39

webpack sass loader not working

0 Answers0