将scss变量传播到每个scss文件的更好方法

Question

我在根文件夹中创建了一个全局scss变量文件
对于导入变量，我会写
@import '../../../style_config/style_config'（全局变量文件）
到每个scss文件

更多我在一个深层文件夹中工作，很难找到相对路径
有什么方法可以使用绝对路径吗？或更好的方式导入scss文件？

Env

在node.js上创建React App

尝试

• 1。在index.js上导入scss变量文件，但是scss文件给我错误。
  没有变量

Answer 1

我的代码结构是：

app
  |_ config/webpack.config.js
  |_ src/assets/styles/_common.scss

在我的 _common.scss 中，我拥有了所有变量和mixins。

您需要在webpack.config.js中为您的scss文件设置别名

module.exports = {
  resolve: {
    alias: {
      styles: path.join(__dirname, "../src/assets/styles")
    }
  }
}

在导入样式时，请使用~

@import "~styles/common";

附言：：很长一段时间以来，我一直在做与您现在完全相同的事情，并且从未想到过可以对其进行优化。感谢您提出来。