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

Question

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

Sel*_*nir 5 sass twitter-bootstrap reactjs webpack

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

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

我的主要两个问题是：

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

有没有什么方法可以处理这类问题？我的猜测是以某种方式启用“全局范围”，这样我就可以使用变量/混合而不连续导入整个 Bootstrap。

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

Answer 1

Gui*_*ume 2

bootstrap.imports.scss遇到了同样的问题，通过创建一个从引导程序导入我的自定义变量和混合、变量等的文件来解决它：

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

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

Run Code Online (Sandbox Code Playgroud)

然后在 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`
        ]
      },
    }]
  })
}]

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	7 年，9 月前
查看次数：	2039 次
最近记录：	5 年前