CODEWITHSUNDEEP
webpacksasswebpack-dev-serverextract-text-pluginextracttextwebpackplugin
Chris O
Chris O

Reputation: 722

Webpack 3 sass loader error after building

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,
    }),
  ],
};

Upvotes: 0

Views: 366

Answers (1)

Asmaa Almadhoun
Asmaa Almadhoun

Reputation: 299

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

Upvotes: 0

Related Questions