使用webpack为Angular App编译scss

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 ?

Answer 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 .