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

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

twitter-bootstrap reactjs webpack sass

Twitter bootstrap 使用Webpack访问Sass中的全局变量，无需多次导入,twitter-bootstrap,reactjs,webpack,sass,Twitter Bootstrap,Reactjs,Webpack,Sass,我正在用React开发一个应用程序，使用Bootstrap4和Sass以及webpack进行构建，每个React组件都有自己的.scss文件我遇到了一个问题，我需要使用引导变量，但我无法导入引导，因为我最终会多次导入引导（除了性能问题外，重复导入会覆盖我对引导规则的更改）我的主要两个问题是：组件a样式表必须访问引导程序的变量和混合（即按钮变量），以实现我必须在.scss文件中导入引导程序（否则我将得到未定义变量错误）将@import'~bootstrap'添加到每个组件的样式表会导致多次

我正在用React开发一个应用程序，使用Bootstrap4和Sass以及webpack进行构建，每个React组件都有自己的.scss文件

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

我的主要两个问题是：

组件a

样式表必须访问引导程序的变量和混合（即

按钮变量

），以实现我必须在

.scss

文件中导入

引导程序（否则我将得到未定义变量
错误）


将@import'~bootstrap'
添加到每个组件的样式表会导致多次导入整个引导。因此，当我在包含共享样式的global.scss
文件中重写一个变量时，即$body bg
，它只在第一次导入时使用我的值，这意味着每次后续引导导入都不会得到我的变量，并继续使用默认值重写它
有什么办法来处理这类问题吗？我的猜测是以某种方式启用“全局范围”，这样我就可以在不连续导入整个引导的情况下使用变量/混合
编辑：我找到了一个解决方法，当从其他Sass文件导入Sass文件时，变量是可访问的，因此创建一个大的import.scss
文件，而不是使用从.js
文件中单独导入的文件似乎也能起作用。
也有同样的问题，通过创建一个文件bootstrap.imports.scss
来解决此问题，该文件从bootstrap导入我的自定义变量以及mixin、变量等：
@import 'bootstrap_variables'; // contains the custom bootstrap variables

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

然后在webpack配置中，我使用sass资源加载器
加载器，如下所示：
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）$/，
加载程序：ExtractTextPlugin.extract({
回退：“样式加载器”，//如果ExtractTextPlugin被禁用，则将CSS注入
使用：[{
loader:'css loader'，//将css转换为CommonJS模块
选项：{
sourceMap:true
}
},
{
loader:'postss loader'，//运行post-css操作
选项：{
sourceMap:true，
plugins:function（）{//postcss插件，可以导出到postss.config.js
返回[
需要（'PostSS-flexbugs-fixes'），
需要（'autoprefixer'）
];
}
}
},
{
loader:'sass loader'，//将sass编译为CSS
选项：{
sourceMap:true
}
},
{
加载器：“sass资源加载器”，
选项：{
资源：[
`${path}/bootstrap.imports.scss`
]
},
}]
})
}]

有了它，我可以在任何地方导入scss文件并使用botostrap函数或变量
没有比用新的@use
替换旧的@import
更好的解决方案了，所有内容都应该只导入一次