Webpack bootstrap ExtractTextPlugin SCSS - 模块解析失败意外字符'@'

Question

我正在尝试使用 webpack 从 bootstrap 4.0.0 beta scss 输出一个 css 文件。我已经按照 https://getbootstrap.com/docs/4.0/getting-started/webpack/ 使用内联样式注入成功处理了 scss 。存在与将样式注入文档头部相关的问题。

这是我的 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'],
    }
};

我已经根据许多人都有相同或相关问题的帖子尝试了对 webpack 配置的所有修改方式。到目前为止，我显然没有成功。

**编辑！重要：整个问题是应该引用排除属性，因为在这种情况下它们不是正则表达式而是字符串。感谢 BudHead！

Answer 1

假设您在条目 js 中像这样导入 bootstrap 4:

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

Webpack bootstrap ExtractTextPlugin SCSS - 模块解析失败意外字符'@'

Webpack bootstrap ExtractTextPlugin SCSS - Module Parse Failed Unexpected character '@'

sass

webpack

bootstrap-4

extract-text-plugin