使用Webpack访问Sass中的全局变量而无需多次导入-Java 学习之路

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

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

我的主要两个问题是：

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

有没有办法处理这类问题？我的猜测是以某种方式启用“全局范围”，所以我可以使用变量/ mixins而无需连续导入整个Bootstrap .

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

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函数或变量

回复于 2024-04-16T23:08:53+08:00

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

1 回答

相关问题