Webpack 3 sass loader error after building

Question

I am using the latest version of webpack 3.4.1 using sass loader and extract text plugin to generate a static css file form the sass source. Its loading fine on my dev server and I can see the css file but getting a console error 'Uncaught SyntaxError: Unexpected token' which is pointing to the css file @ body {color:#000} on the first line.

My webpack config is below. Any help much appreciated.

const path = require('path');
const webpack = require('webpack');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, ''),
  entry: {
    app: './src/js/app.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, './dist/assets'),
    publicPath: '/assets',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './src'), // New
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          },
        }],
      },
      {
        test: /\.(svg|gif|png|eot|woff|ttf)$/,
        use: [{
          loader: 'url-loader'
        }]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      }
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: '[name].bundle.css',
      allChunks: true,
    }),
  ],
};

Did you try putting a semicolon at the end of your color declaration? `{color:#000;}` I get that a lot when compiling Sass from the command line, since Sass requires correct CSS syntax (unlike SCSS). — xtoq, Mar 15 '18 at 13:58

score 0 · Answer 1 · answered Aug 04 '17 at 20:47

Why you don't use an external compiler from Sass to CSS, it will be faster and easier to you, and you will just use CSS loader at your webpack config, you have multiple of program compiler from sass to css such as(compass, Prepros) Prepros is so good, I use this way and haven't any problem at it

Webpack 3 sass loader error after building

1 Answers1