Question

我正在使用Webpack配置文件来开发React js应用。在这里，我试图用custom覆盖bootstrap变量。但是我收到很多“变量是未定义的错误”。我关注了Bootstrap Webpack集成文档，下面是链接：https://getbootstrap.com/docs/4.1/getting-started/webpack/

我收到此错误::

模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）： SassError：$color的参数darken($color, $amount)必须是颜色在功能darken中的src / assets / scss / _bootstrap-override.scss的第172行上从src / assets / scss / _bootstrap-override.scss的第172行起

我的文件夹结构是这样的：根目录：：

-src->资产-> scss

现在Sass文件夹包含我的自定义sass文件和_style.scss文件。我在其中导入了引导程序完整变量，并尝试使用自定义变量覆盖文件。

_style.scss

$body-color:#000;
body{
    background-color: $body-color;
}
@import 'bootstrap-override.scss';
@import '~bootstrap/scss/bootstrap.scss';

将文件导入到index.js后

我的webpack.config.js

/**
 * Webpack Config
 */
const path = require('path');
const fs = require('fs');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const publicPath = '/';

// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// plugins
const autoprefixer = require('autoprefixer');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: ["babel-polyfill", "react-hot-loader/patch", "./src/index.js"],
    output: {
        path: resolveApp('dist'),
        filename: 'static/js/[name].[hash:8].js',
        publicPath: publicPath,
        // hotUpdateChunkFilename: 'hot/hot-update.js',
        // hotUpdateMainFilename: 'hot/hot-update.json',
        // hotUpdateChunkFilename: '[id].[hash].hot-update.js',
        // hotUpdateMainFilename: '[hash].hot-update.json'
        // hotUpdateChunkFilename: (chunkData) => {
        //  return `${chunkData.chunk.name === 'main' ? '' : '[name]/'}[id].[hash].hot-update.js`;
        // },
        // hotUpdateMainFilename: '[hash].hot-update.json'
    },
    devServer: {
        contentBase: './src/index.js',
        host: '0.0.0.0',
        compress: true,
        port: 3000, // port number
        historyApiFallback: true,
        quiet: true
    },
    // resolve alias (Absolute paths)
    resolve: {
        alias: {
            Actions: path.resolve(__dirname, 'src/actions/'),
            Components: path.resolve(__dirname, 'src/components/'),
            Assets: path.resolve(__dirname, 'src/assets/'),
            Routes: path.resolve(__dirname, 'src/routes/'),
            Constants: path.resolve(__dirname, 'src/constants/'),
            Helpers: path.resolve(__dirname, 'src/helpers/'),
            Api: path.resolve(__dirname, 'src/api/')
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'static/media/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            // Scss compiler
            {
                test: /\.(scss)$/,
                use: [{
                    loader: 'style-loader', // inject CSS to page
                }, {
                    loader: 'css-loader', // translates CSS into CommonJS modules
                }, {
                    loader: 'postcss-loader', // Run post css actions
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]

            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    parse: {
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        // Disabled because of an issue with Uglify breaking seemingly valid code:
                        // https://github.com/facebook/create-react-app/issues/2376
                        // Pending further investigation:
                        // https://github.com/mishoo/UglifyJS2/issues/2011
                        comparisons: false,
                    },
                    mangle: {
                        safari10: true,
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        // Turned on because emoji and regex is not minified properly using default
                        // https://github.com/facebook/create-react-app/issues/2488
                        ascii_only: true,
                    },
                },
                // Use multi-process parallel running to improve the build speed
                // Default number of concurrent runs: os.cpus().length - 1
                parallel: true,
                // Enable file caching
                cache: true,
                sourceMap: true
            })
        ]
    },
    performance: {
        hints: process.env.NODE_ENV === 'production' ? "warning" : false
    },
    plugins: [
        new FriendlyErrorsWebpackPlugin(),
        new CleanWebpackPlugin({
            dry: false,
            verbose: false,
        }),
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html",
            favicon: './public/favicon.ico'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "static/css/[name].[hash:8].css"
        })
        // new BundleAnalyzerPlugin()
    ]
};

我的package.json，开发依赖项:::

"devDependencies": {
        "@babel/cli": "^7.6.2",
        "@babel/core": "^7.6.2",
        "@babel/node": "^7.6.2",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/preset-env": "^7.6.2",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.6.2",
        "autoprefixer": "^9.6.1",
        "babel-loader": "^8.0.6",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.2.0",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-template": "^6.2.0",
        "mini-css-extract-plugin": "^0.8.0",
        "node-sass": "^4.12.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "url-loader": "^2.1.0",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.1"
    }

我正在使用"react": "^16.9.0",

请提出我应该怎么做才能摆脱它。我使用简单的变量，但是嵌套变量有问题。我正在尝试将引导程序覆盖到我自己的自定义变量。

模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：具有Webpack配置的React应用

0 个答案: