使用vue-styleguidist时无法加载全局SCSS变量的问题求助

我之前也碰到过这个坑，直接在styleguide.conf.js里用require加载SCSS文件有时候确实不顶用，因为vue-styleguidist的SCSS预处理器配置需要单独处理全局变量。下面给你几个亲测有效的解决方案：

方案一：配置webpack选项全局注入变量 #

最靠谱的方式是直接在styleguide.conf.js里配置webpack的sass-loader，把你的_variables.scss作为全局文件注入，这样所有组件的style标签都能直接访问变量：

const path = require('path');

module.exports = {
  // 这里放你原本的styleguidist配置，比如components、title之类的
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                // 注意路径要和你的项目结构匹配，这里是示例路径
                additionalData: `@import "${path.resolve(__dirname, 'src/assets/scss/_variables.scss')}";`
              }
            }
          ]
        }
      ]
    }
  }
};

小提示：如果你的sass-loader版本低于8.x，要把additionalData换成prependData；要是版本在7.x及以下，就用data，不同版本的参数名不一样哦。

方案二：检查main.scss的导入逻辑 #

如果你还是想用require的方式，先确认你的main.scss是不是正确导入了_variables.scss：

// src/assets/scss/main.scss
@import './_variables.scss';
// 其他全局样式代码...

然后别忘了在styleguide.conf.js里补充方案一里的webpack配置，单纯的require只是加载了样式文件，但没法让预处理器全局识别变量，必须配合sass-loader的配置才行。

方案三：适配vue-cli 3+的配置（如果用的是新版vue-cli） #

要是你的项目是vue-cli 3及以上版本，可以直接在vue.config.js里配置全局SCSS变量，styleguidist会自动继承vue-cli的webpack配置：

const path = require('path');

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/scss/_variables.scss')}";`
      }
    }
  }
};

然后在styleguide.conf.js里只需要继承vue-cli的配置就行：

const { vueCliConfig } = require('vue-styleguidist');

module.exports = {
  ...vueCliConfig,
  // 你的styleguidist专属配置，比如components路径、样式指南标题等
};

最后重启一下styleguide服务器，应该就能在组件里正常用$border-radius这类变量啦！

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