Javascript 将Bootstrap 4.5.2与Webpack一起使用

我无法将常规引导样式应用于HTML元素。例如，

Primary

变成默认的灰色按钮。（我可以覆盖custom.scss中的样式，因此我可以覆盖bg颜色等的scss变量。）

另一个问题是VisualStudio的autocomplete不知道一些引导类，例如“FormGroup”，但它知道offset-xl-2和其他一些

在构建之前，我运行

npm run mytest

脚本来使用webpack，请参阅下面的package.json

index.js：

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

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";

package.json：

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "css-loader": "^4.3.0",
    "exports-loader": "^1.1.1",
    "mini-css-extract-plugin": "^0.11.2",
    "node-sass": "^5.0.0",
    "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": {
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "jquery-validation": "^1.19.2",
    "jquery-validation-unobtrusive": "^3.2.11",
    "popper.js": "^1.16.1"
  },
  "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和css插入到_Layout.cshtml中的html中：

    <link rel="stylesheet" href="~/css/mainly.css" />
    <script src="~/js/bundle.js"></script>

---

在网页包中添加

样式加载器

，用于注入页面：

{
  loader: 'style-loader',
}

---

请参阅

@import”/node_模块/引导/scss/reboot”；您的sass文件与node_模块处于同一级别？或者您将其导入应用程序组件？我可以看到您在index.js中绑定了SASS，但不确定您将CSS插入HTML的何处。通常使用HtmlWebpackPlugin来插入它。请参阅，以获取一个可用的引导示例。您不需要@import“~bootstrap/scss/buttons”吗；（或者不管你的路径是什么）导入按钮的引导样式？！在你的custom.scss中有_button.scss导入到main bootstrap.scssInside index.js中，我认为import'bootstrap'捆绑JavaScript和custom.scss将转换并捆绑Sass样式，我在那里看不到导入。。。？