webpack ExtractTextPlugin 意外'@'

Question

所以我有一个使用 webpack 的 Angular 应用程序。自 12 月以来我没有改变任何东西，它运行良好。但是在将 repo 拉到新机器上并确保我已经运行 npm install 后跟 webpack 命令时，我收到以下错误：

 [776] ./src/global.scss 41 bytes {3} [built]
 [777] ./src/theme/scss/kothapro.scss 311 bytes {2} [built] [failed] [1 error]
    + 763 hidden modules

ERROR in ./src/theme/scss/kothapro.scss
Module parse failed: E:\Simon\Sites\devsi\src\theme\scss\kothapro.scss Unexpected character '@' (4:0)
You may need an appropriate loader to handle this file type.
|  * webpack entry point
|  */
| @import "base/_variables";
| @import "base/_mixins";
| @import "base/_base";
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/sass-loader/lib/loader.js!src/global.scss:
       [0] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/global.scss 199 bytes {0} [built]

我不知道为什么会突然发生这种情况。任何人都可以阐明可能导致这种情况的原因吗？

这是我的 webpack 配置文件：

webpack.common.js

const webpack = require('webpack');
const helpers = require('../helpers');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'app': './src/main.ts',
        'styles': './src/global.scss',
        'theme': './src/theme/scss/kothapro.scss'
    },

    resolve: {
        extensions: [
            '.js', '.ts'
        ]
    },

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [ 'awesome-typescript-loader?configFileName=config/tsconfig.json', 'angular2-template-loader' ]
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.scss$/,
                exclude: [ /node_modules/, helpers.root('src', 'global.scss'), helpers.root('src', 'theme/scss/kothapro.scss') ],
                use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
            },
            {
                test: /(global|theme\/scss\/kothapro)\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader!sass-loader'
                })
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
                use: 'file-loader?name=assets/[name].[hash].[ext]'
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: [ 'app', 'vendor', 'polyfills' ]
        }),

        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('src'),
            {}
        )
    ]
};

webpack.dev.js

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const helpers = require('../helpers');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',

    output: {
        path: helpers.root('web/dist'),
        publicPath: '/dist/',
        filename: '[name].js',
        chunkFilename: '[id].chunk.js'
    },

    plugins: [
        new ExtractTextPlugin('[name].css')
    ]
});

在 package.json 我有：

"devDependencies": {
    "@types/node": "~6.0.60",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "~3.2.3",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "^0.8.5",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.26.0",
    "loader-utils": "^1.1.0",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "to-string-loader": "^1.1.5",
    "typescript": "~2.5.2",
    "webpack": "~3.4.1",
    "webpack-merge": "~4.1.0"
  }

谢谢！

Answer 1

您正在排除您的 scss 文件，因此 sass 加载程序无法处理它。

变化：

{
    test: /\.scss$/,
    exclude: [ /node_modules/, helpers.root('src', 'global.scss'), helpers.root('src', 'theme/scss/kothapro.scss') ],
    use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},

收件人：

{
    test: /\.scss$/,
    include: [ /node_modules/, helpers.root('src', 'global.scss'), helpers.root('src', 'theme/scss/kothapro.scss') ],
    use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},

或者如果你想处理'theme/scss'文件夹中的所有文件

{
    test: /\.scss$/,
    include: [ /node_modules/, helpers.root('src', 'global.scss'), helpers.root('src', 'theme', 'scss') ],
    use: [ 'to-string-loader', 'css-loader', 'sass-loader' ]
},