使用 webpack 为 Angular 应用程序编译 scss

Question

我正在为我的 Angular 应用程序使用 webpack 3。我在编译我的 scss 文件时遇到了一些问题。这是完整的 webpack 配置文件：

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

运行 webpack 后出现此错误：

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

我也尝试使用这个加载器：https://github.com/webpack-contrib/sass-loader

webpack 构建后没有出现错误，但是 /app 文件夹中也没有创建 css 文件。

在 index.js 中导入 main.scss 文件：

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

谁能给我一个建议，我如何使用 webpack 3 构建和观看 scss 文件？

Answer 1

您使用了一些可能适用于 webpack 1 的加载器配置。

配置的那部分：

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]'
      }
    ],

当您迁移到 Webpack 2（或 3）时，会有重大变化。 其中之一是module.loaders => module.rules。 您需要将该部分转换为新结构。

此外，ExtractTextPlugin 也改变了它的配置样式，please read it README。