<磷>module: { 规则:[ { 测试:/.(js|ts|tsx)$/, 排除:/node_modules/, 使用: { 装载机:'ts-装载机', }, },磷>磷>
P粉4251197392023-09-15 19:32:01
所以,我找到了解决方案,首先在这个 .scss 文件中创建单独的 bootstrap.scss 并导入 bootstrap.css (在我的例子中,我只需要 bootstrap 中的网格):
@import 'bootstrap/dist/css/bootstrap-grid.min.css';
对于 sass 或 scss 文件,这些设置应位于 webpack.configuration.js 中:
return merge(filteredConfig, { entry: './src/moduleEntry.tsx', plugins: [ new ESLintPlugin({ extensions: ['js', 'jsx', 'ts', 'tsx'] }), new MiniCssExtractPlugin({ filename: `${moduleName}.css`, }), ], module: { rules: [ { test: /\.s[ac]ss$/i, use: [ // Creates `style` nodes from JS strings !isProduction ? 'style-loader' : MiniCssExtractPlugin.loader, // Translates CSS into CommonJS { loader: 'css-loader', options: { modules: { auto: true, localIdentName: '[local]-[hash:base64:5]', }, }, }, // Compiles Sass to CSS 'sass-loader', ], }, ...] }
这些更改将使您的 .scss 文件处于生产模式,将其合并到单个 .css 文件中,并将 Bootstrap 中的 CSS 放入您的确切模块的 style.css 中。