Javascript 使用Web包为Angular应用程序编译SCS

我正在使用Webpack3作为我的angular应用程序。我在编译scss文件时遇到一些问题。以下是完整的网页包配置文件：

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

我还尝试使用此加载程序：

在webpack构建之后，并没有出现任何错误，但css文件也并没有在/app文件夹中创建

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

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

---

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

您已经使用了一些加载程序配置，这些配置应该用于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]'
      }
    ],

当您移动到网页2（或3）时，会出现突破性的更改。 其中一个是

module.loaders=>module.rules

。 您需要将该部分转换为新结构

---

此外，ExtractTextPlugin还更改了它的配置样式。

有关从Webpack1到Webpack2的详细迁移，谢谢！我用以下规则替换了scss的加载程序：{test://\.scss$/，使用：ExtractTextPlugin.extract（{fallback:'style loader'，使用：['css-loader'，'sass loader']}}）和bundle.css builded fine。