Question

目的是通过更改颜色，大小等来构建自定义的bootstrap.css（而不是bootstrap.js）。因此，通过参考bootstrap official site，我进行了以下操作。

1）我的示例自定义引导程序scss文件（scss / bootstrap-custom.scss）

$primary: #20c997;  // This will change primary color to green
@import "../node_modules/bootstrap/scss/bootstrap";

2）我的webpack.config.twbs.js文件（我的SPA使用默认的webpack.config.js，因此我对引导程序使用了不同的配置文件。我不想将自定义的引导程序代码与我的SPA捆绑在一起）< / p>

module.exports = {
    entry: "./scss/bootstrap-custom.scss",
    output: {
        path: "build"
    },
    module: {
        rules: [{
            test: /\.(s*)css$/,        
            use: [
                {
                    loader: "file-loader",
                    options: {
                        name: "[name].css"
                    }
                }, 
                {
                    loader: 'postcss-loader',
                    options: {
                        plugins: function () {
                            return [
                                require('autoprefixer')
                            ]
                        }
                    }
                },
                "sass-loader"
            ]
        }]
    }
}

我安装了所有必需的npm模块：

引导程序
文件加载器
postcss-loader
sass-loader
node-sass

在我的package.json中，我有一个脚本：

"scripts": {
  ...
  "twbs": "webpack --config webpack.config.twbs.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

现在，如果我运行twbs脚本

npm run twbs

然后按预期在构建文件夹中获得bootstrap-custom.css文件。问题是我也将main.js文件也发送到了build文件夹中。如何防止这种情况发生？另外，将非常感谢任何其他建议或自定义引导程序的替代方法。

使用Webpack自定义boostrap 4

0 个答案: