使用 Webpack 将 Bootstrap scss 转换为 css 并进行修改？

Question

在一个 .NET Core Web 应用项目中，我创建了一个名为“client”的文件夹来包含我的前端自定义 scss 文件，覆盖 Bootstrap 的 scss。 （“client”文件夹还包含 js 文件，但目前不需要覆盖任何内容。）我已经制作了一个这样的 package.json，其中“mytest”脚本旨在运行 Webpack 并将 scss 转换为 css 并放入将其放入名为 wwwroot/mainly.css 的文件中。在 _Layout.shtml 我使用<link rel="stylesheet" href="~/css/mainly.css" /><script src="~/js/bundle.js"></script>。如何尝试在 Bootstrap 提供的 scss 的“顶部”编写 scss？我以为我可以在下面的 custom.scss 中做到这一点，但它对输出没有任何影响。 （是的，我在构建之前运行npm run mytest。）

custom.scss：

// Required
@import "/node_modules/bootstrap/scss/functions";
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/mixins";

// Optional
@import "/node_modules/bootstrap/scss/reboot";
@import "/node_modules/bootstrap/scss/type";
@import "/node_modules/bootstrap/scss/images";
@import "/node_modules/bootstrap/scss/code";
@import "/node_modules/bootstrap/scss/grid";

$body-bg: #ffd800;
$body-color: #4cff00;

package.json:

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^4.3.0",
    "mini-css-extract-plugin": "^0.11.2",
    "postcss-loader": "^4.0.2",
    "sass": "^1.26.11",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "jquery": "^3.5.1",
    "@popperjs/core": "^2.5.2",
    "bootstrap": "^4.5.2",
    "jquery-validation": "^1.19.2",
    "jquery-validation-unobtrusive": "^3.2.11"
  },
  "scripts": {
    "bootstrap-js": "webpack --mode production --progress --profile --config webpack.bootstrap.js",
    "bootstrap-css": "node-sass --output-style compressed client/css/bootstrap.scss wwwroot/css/bootstrap.min.css",
    "bundles": "npm run bootstrap-js && npm run bootstrap-css",
    "mytest": "webpack --mode development"
  }
}

我的 webpack.config.js：

  const webpack = require('webpack');
  const path = require('path');
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const config = {
   entry: './client/js/index.js',
   output: {
       path: path.resolve(__dirname, 'wwwroot/js/'),
       filename: 'bundle.js'
   },
   plugins: [new MiniCssExtractPlugin({
           filename: '../css/mainly.css'
   })
   ],
   module: {
       rules: [
           {
               test: /\.s[ac]ss$/i,
               use: [
                   {
                       loader: MiniCssExtractPlugin.loader
                   },
                   'css-loader',
                   'sass-loader'
               ]
           }
       ]
   }
};

module.exports = config; 

客户端/js/index.js:

import "../css/custom.scss";



console.log("Hello, you cruel front-end world.");

当我运行npm run mytest 时，会发生这种情况：

似乎不包含来自 custom.scss 的更改的输出：

Answer 1

尝试使用/\.(sa|sc|c)ss$/ 而不是/\.s[ac]ss$/ 来捕获 .sass、.scss 和 .css 文件。

覆盖应该在引导导入之前。

$body-bg: #ffd800;
$body-color: #4cff00;

// Required
@import "/node_modules/bootstrap/scss/functions";
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/mixins";

// Optional
@import "/node_modules/bootstrap/scss/reboot";
@import "/node_modules/bootstrap/scss/type";
@import "/node_modules/bootstrap/scss/images";
@import "/node_modules/bootstrap/scss/code";
@import "/node_modules/bootstrap/scss/grid";