Загрузочный пакет Webpack ExtractTextPlugin SCSS - модуль Parse Failed Неожиданный символ '@'

Question

Я пытаюсь вывести файл CSS из начальной загрузки бета-версии 4.0.0 с помощью веб-пакета. Я успешно обработал scss с помощью встроенного стиля в соответствии с: https://getbootstrap.com/docs/4.0/getting-started/webpack/. Есть проблемы, связанные с внедрением стиля в заголовок документа.

вот мой package.json:

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/knockout": "^3.4.46",
    "bootstrap": "^4.0.0-beta",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "jquery": "^3.2.1",
    "knockout": "^3.4.2",
    "node-sass": "^4.5.3",
    "popper.js": "^1.12.5",
    "postcss-loader": "^2.0.8",
    "precss": "^2.0.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.0.2",
    "typescript": "^2.5.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-notifier": "^1.5.0"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "build"
    ]
  },
  "dependencies": {}
}

и мой webpack.config.js (обновленный):

var path = require('path');
var webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractScss = new ExtractTextPlugin({
    filename: 'dist/[name].[hash].css',
    allChunks: true,
});

module.exports = {
    entry: {
        site: [
            './wwwroot/js/site.js',
            './Script/testkoviewmodel.ts'],
    },
    output: {
        publicPath: "/dist/",
        path: path.join(__dirname, '/wwwroot/dist/'),
        filename: '[name].[hash].build.js',
    },
    plugins: [
        extractScss,
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            compress: {
                warnings: false
            },
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            Popper: ['popper.js', 'default'],
        }),
        new HtmlWebpackPlugin({
            inject: false,
            template: 'Views/Shared/_LayoutTemplate.cshtml',
            filename: '../../Views/Shared/_Layout.cshtml',
        }),        
    ],
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                exclude: /node_modules/,
            },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            {
                test: /\.scss$/,
                use: extractScss.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'sass-loader']
                }),
                exclude: /node_modules/,
            },
            { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
            { test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000" },
            { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
            { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.scss'],
    }
};

Я перепробовал всевозможные модификации конфигурации веб-пакета в соответствии со многими сообщениями людей, имеющих одинаковую или связанную проблему. До сих пор я явно был неудачным.

** РЕДАКТИРОВАТЬ! Важно: вся проблема заключается в том, что свойства исключения должны быть в кавычках, так как в этом случае они не являются регулярными выражениями, а являются строками. Спасибо BudHead!

Answer 1

Предполагая, что вы импортируете bootstrap 4 как в записи js:

import 'bootstrap/scss/bootstrap.scss';

... попробуйте следующую настройку плагина:

const extractScss = new ExtractTextPlugin({
  filename: 'assets/css/[name].[contenthash].css',
  allChunks: true
});

... добавьте вышеупомянутое в ваш массив плагинов:

plugins: [extractScss]

... а потом по твоим правилам

{
  test: /\.scss$/,
  use: extractScss.extract({
    fallback: 'style-loader',
    //resolve-url-loader may be chained before sass-loader if necessary
    use: ['css-loader', 'sass-loader']
  })
}

---

Поэтому важно создать ваш ExtracTextPlugin, здесь у меня есть мой набор

const extractScss = new ExtractTextPlugin(...)

Таким образом, позже в вашей конфигурации правил вы передаете тот же объект. В приведенном выше коде вы используете импортированный экземпляр ExtractTextPlugin, а не новый, созданный вами в массиве плагинов (для которого не заданы параметры).

Вам, вероятно, придется изменить имя файла в настройках плагина, мой настроен на что-то вроде assets/css/main.awef32fq23faf23aasdf.css