Compile scss with webpack for an Angular App

Question

I'm using webpack 3 for my angular app. I have some issues with compiling my scss files. Here is full webpack config file:

const path = require('path')
const autoprefixer = require('autoprefixer')
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const config = {
  context: __dirname + '/src',
  entry: {
    app: './index.js',
    vendor: [
      'angular',
      'angular-animate',
      'angular-bootstrap',
      'angular-route',
      'animate',
      'bootstrap',
      'bootstrap-filestyle',
      'jquery',
      'ng-file-upload',
      'ng-parallax'
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'app'),
    publicPath: path.join(__dirname, 'app')
  },
  resolve: {
    extensions: ['.js', '.jsx', '.scss']
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css?minimize!postcss!sass')
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        loader: 'file?name=images/[name].[ext]'
      }
    ],
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'url-loader'
      },
      {
        test: /\.php$/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.zip$/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader: 'file-loader?name=[path][name].[ext]'
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('./bundle.css'),
    new CommonsChunkPlugin({
      name: 'vendor',
      filename: 'vendor.bundle.js'
    }),
    new UglifyJSPlugin({})
    // new ExtractTextPlugin({
    //   filename: '[name].min.css'
    // })
  ]
}

module.exports = config

After running webpack i've got this error:

ERROR in ./assets/sass/main.scss
Module parse failed: /home/git/project/src/public/src/assets/sass/main.scss Unexpected token (1:13)
You may need an appropriate loader to handle this file type.
| $header-color: #ffffff;
| $admin-panel-height: 40px;
| 
 @ ./index.js 3:0-34

Also i tried to use this loader: https://github.com/webpack-contrib/sass-loader

After webpack build there no errors appeared, but css file also was not created in /app folder.

file main.scss imports in index.js:

import './assets/sass/main.scss'

Can anyone give me an advice how can i build and watch scss files with webpack 3 ?

felixmosh · Accepted Answer · 2017-09-09 07:27:33Z

1

You have used some of the loader configs that suppose to be for webpack 1.

That section of the config:

loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css?minimize!postcss!sass')
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        loader: 'file?name=fonts/[name].[ext]'
      },
      {
        test: /\.(jpg|jpeg|gif|png|svg)$/,
        loader: 'file?name=images/[name].[ext]'
      }
    ],

There are breaking changes when you move to Webpack 2 (or 3). One of them was module.loaders => module.rules. You will need to convert that section to the new structure.

In addition, ExtractTextPlugin changes it config style as well, please read it README.

answered Sep 9, 2017 at 7:27

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

felixmosh Over a year ago

For a detailed migration from webpack 1 to 2, javascriptplayground.com/blog/2016/10/moving-to-webpack-2

Vlad Morzhanov Over a year ago

Thanks! I replaced loader with this rule for scss: { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) } And bundle.css builded fine.

Collectives™ on Stack Overflow

Compile scss with webpack for an Angular App

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related