Gatsby项目中如何将自定义Sass变量导入组件Sass文件？

嘿，我之前也碰到过一模一样的问题！这其实是Gatsby配置Sass全局变量时的常见小坑，给你两个实用的解决方案，按需选就行：

方案1：手动导入（简单直接，适合小项目） #

如果你的项目规模不大，每个组件的Sass文件手动导入全局变量文件就行，重点是路径要写对。

比如在src/components/header/header.sass里，要导入sass文件夹下的_color.sass，相对路径应该是向上两级到src目录，再进入sass文件夹：

# header.sass
@import '../../sass/_color.sass'
@import '../../sass/_mixins.sass'

// 接下来就可以正常用变量了
.header
  background-color: $primary-color

注意：.sass是缩进语法，导入时可以省略后缀，但写上也没问题，看你习惯。

方案2：全局自动导入（一劳永逸，适合中大型项目） #

如果不想每个文件都写重复的导入语句，可以修改Gatsby的Sass插件配置，让所有Sass文件自动加载全局变量/混合宏文件，步骤如下：

1. 打开项目根目录的gatsby-config.js，找到gatsby-plugin-sass的配置项（如果之前只是简单注册插件，现在要改成对象形式）：

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        // 如果你装的是 dart-sass（现在Gatsby默认推荐的包，包名是`sass`），用additionalData
        additionalData: `@import "./src/sass/_color.sass"; @import "./src/sass/_mixins.sass";`,
        // 如果你装的是 node-sass（旧版，包名是`node-sass`），把上面的additionalData改成data
        // data: `@import "./src/sass/_color.sass"; @import "./src/sass/_mixins.sass";`,
      },
    },
    // 其他插件...
  ],
}

2. 重启Gatsby开发服务器！修改配置后必须重启才能生效，不然不会加载新的配置。

这样之后，所有组件的Sass文件里都能直接用全局变量，不用再手动导入啦～

进阶优化：用webpack别名简化路径 #

如果觉得手动导入时的相对路径太麻烦，还可以配置webpack别名，把src/sass映射成一个简短的别名，比如~sass：

1. 在项目根目录创建/打开gatsby-node.js，添加以下代码：

// gatsby-node.js
const path = require('path')

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '~sass': path.resolve(__dirname, 'src/sass'),
      },
    },
  })
}

2. 之后在任何Sass文件里，都可以用别名来导入：

@import "~sass/_color.sass"

这样不管组件在哪个层级，路径都统一又好记～

内容的提问来源于stack exchange，提问作者York Wang