在AngularJS1.5.11中使用Webpack4时构建失败

Question

我正在AngularJS项目上配置webpack进行捆绑。我使用webpack4相同。 下面是配置文件。 webpack.config.js：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin');// Require  html-webpack-plugin plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const ExtractNormalCSS = new ExtractTextPlugin("./src/main/frontend/sass/main.scss");

const extractCSS = new ExtractTextPlugin('/src/main/frontend/assets/icons/paas-icons/style.css');

module.exports = {
    entry: [ "./src/main/frontend/app/app.js","./src/main/frontend/sass/main.scss"], // webpack entry point. Module to start building dependency graph
  output: {
    path: path.join(__dirname, '/distTemp/'), // Folder to store generated bundle
    filename: '[name].bundle.js' // Name of generated bundle after build
    //publicPath: '' // public URL of the output directory when referenced in a browser
  },
  resolve:{
    modules: [
        'node_modules',
        'bower_components',
        'src'
    ],
    extensions:[".js"]
  },
  module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            options: {
                compact: false,
                cacheDirectory: true,
                presets: ['es2015', 'angular'],
            },
        },
        {
            test: /.(scss)$/,
            loader: 'style-loader!css-loader!sass-loader'
        },
        {
            test: /\.html$/,
            loader: 'html-loader?name=views/[name].[ext]'
        },
        {
            test: /\.(png|jpg)$/,
            use: [
                'url-loader?limit=8192'
            ]
        },

    ]
  },
  optimization: {
    minimizer: [

        new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    uglifyOptions: {
                        compress: false,
                        ecma: 6,
                        mangle: false
                    },
                    sourceMap: true
        })
    ],
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /node_modules/,
                name: 'vendor',
                chunks: 'all'
            }
        }
    }
  },
  plugins: [  // Array of plugins to apply to build chunk
      new HtmlWebpackPlugin({
          template: "./src/main/frontend/index.html",
          inject: 'body'
      }),
      new ExtractTextPlugin('/distTemp/style/style.css'),
      ExtractNormalCSS,
      extractCSS
  ],
  devServer: {  // configuration for webpack-dev-server
      contentBase: '.src/main/frontend/assets',  //source of static assets
      port: 7700, // port to run dev-server
  }
};

在构建时，出现以下错误。

ERROR in ./src/main/frontend/sass/main.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/main/frontend/sass/main.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

var path = require("path");
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
      in ###/node_modules/bourbon/index.js (line 1, column 1)
Error: 
var path = require("path");
^
      Invalid CSS after "v": expected 1 selector or at-rule, was "var path = require("
      in ###/node_modules/bourbon/index.js (line 1, column 1)
    at options.error (###/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/main/frontend/sass/main.scss 2:14-134
 @ multi ./src/main/frontend/app/app.js ./src/main/frontend/sass/main.scss

我正在对.scss文件使用sass-loader和node-sass。 main.scss文件包含其余样式文件的导入。 有人可以协助我解决此错误吗？