带有波旁威士忌的 webpack4 mini-css-extract-plugin

Question

I have my scss file which imports a scss file which further imports bourbon and bourbon-neat. I even searched various issues on the forum but did not find the issue where in the scsss to css conversion, the case is to include bourbon.

网络包 4.28.1 迷你-css-提取插件 0.5.0

我看到以下错误：

Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js??ref--5-2!src/component/styles/main.scss:enter code here
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js?!./src/component/styles/main.scss] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/main.scss 373 bytes {mini-css-extract-plugin} [built] [failed] [1 error]

ERROR in ./src/component/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--5-2!./src/component/styles/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 /Users/../node_modules/bourbon/index.js (line 1, column 1)

我的 webpack.config.js 文件在这里

const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
    entry: {
        "app": ['whatwg-fetch',"./src/component/index.ts", "./src/component/styles/main.scss"],
        "app-helper": "./src/component/helpers.ts"
    },
    output: {
        path: path.resolve(__dirname, './src/component/dist'),
        filename: "[name].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            },
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                {
                    loader: "sass-loader",// compiles Sass to CSS
                    options: {
                        includePaths: [
                            'node_modules/bourbon/app/assets/stylesheets',
                            'node_modules/bourbon-neat/app/assets/stylesheets'
                        ]
                    }
                }
            ],
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: './src/component/dist/output-style.css',
        })
    ],
    optimization: {
        minimizer:[
            new UglifyJSPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }
}

请提出您宝贵的建议。

Answer 1

事实证明这是 sass-loader 版本 7.x 的问题。我将 sass-loader 依赖项更改回 6.0.7，它开始像魅力一样工作。这是帮助

的 Whosebug 线程

Angular 2 Node Bourbon Error

带有波旁威士忌的 webpack4 mini-css-extract-plugin

webpack4 mini-css-extract-plugin with bourbon

bourbon

webpack-4

mini-css-extract-plugin