Question

我正在使用带有Sass和webpack的Bootstrap 4使用React开发一个应用程序来构建，每个React组件都有它自己的.scss文件。

我遇到了一个问题，我需要使用Bootstrap的变量，但我无法导入bootstrap，因为我最终导入Bootstrap多次（除了性能问题重复导入继续覆盖我对Bootstrap规则的更改

我的主要两个问题是：

ComponentA样式表必须访问Bootstrap的变量和mixins（即button-variant）才能实现我@import文件中的.scss Bootstrap（否则我最终会收到undefined variable错误。
将@import '~bootstrap'添加到每个组件的样式表会导致多次导入整个Bootstrap。所以当我覆盖一个变量，即$body-bg文件中包含共享样式的global.scss时，它只在第一次导入时使用我的值，这意味着每个后续的Bootstrap导入都没有得到我的变量，并用默认值保持覆盖它。

有没有办法处理这类问题？我的猜测是以某种方式启用＆＃34;全局范围＆＃34;，所以我可以使用变量/ mixins而不必不断地导入整个Bootstrap。

编辑：我找到了一种解决方法，当从其他Sass文件导入Sass文件时，变量是可访问的，因此创建一个大的import.scss文件，而不是使用{{1}的单独导入文件似乎有用。

Answer 1

有同样的问题，设法通过创建一个文件bootstrap.imports.scss来解决它，该文件从bootstrap导入我的自定义变量和mixins，变量等：

@import 'bootstrap_variables'; // contains the custom bootstrap variables

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';

然后在webpack配置中，我使用sass-resources-loader加载器，如下所示：

rules: [{
  test: /\.(scss)$/,
  loaders: ExtractTextPlugin.extract({
    fallback: 'style-loader', // in case the ExtractTextPlugin is disabled, inject CSS to <HEAD>
    use: [{
      loader: 'css-loader', // translates CSS into CommonJS modules
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'postcss-loader', // Run post css actions
      options: {
        sourceMap: true,
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('postcss-flexbugs-fixes'),
            require('autoprefixer')
          ];
        }
      }
    },
    {
      loader: 'sass-loader', // compiles SASS to CSS
      options: {
        sourceMap: true
      }
    },
    {
      loader: 'sass-resources-loader',
      options: {
        resources: [
          `${path}/bootstrap.imports.scss`
        ]
      },
    }]
  })
}]

有了这个，我可以在任何地方导入scss文件并使用botostrap函数或变量

Answer 2

没有比将旧的@import替换为新的@use更好的解决方案了，并且所有内容仅应导入一次

https://sass-lang.com/documentation/at-rules/import

使用Webpack访问Sass中的全局变量而无需多次导入

2 个答案: