webpack ExtractTextPlugin неожиданное '@'

Question

Итак, у меня есть угловое приложение, которое использует веб-пакет. Я ничего не изменил с декабря, где все работало нормально. Но после вытащить репо на новой машине и убедиться, что я бегу 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 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: /\.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' ]
},