vue cli3配置sass全局变量报错

Question

vue.config.js代码如下

`module.exports = {

css: {
    loaderOptions: {
        // 给 sass-loader 传递选项
        sass: {
            // @/ 是 src/ 的别名
            // 所以这里假设你有 src/variables.scss 这个文件
            prependData: @import "~@/assets/css/global.scss";
        }
    }
}

}`

---

global.scss如下
$bg:#6d7bf8;

---

组件代码如下：

---

报错结果

文件结构

Answer 1

sass-loader 版本 8.x 的

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "path/to/your-theme.scss";`
        // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData
      }
    }
  },
  ...
}

sass-loader 版本 9.x 的

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "path/to/your-theme.scss";`
        // sass 版本 9 中使用 additionalData 版本 8 中使用 prependData
      }
    }
  },
  ...
}

Answer 2

把 sass-loader 升级至 8.x 版本（对应 cli 4.x），然后 variables.scss 应为 _variables.scss，这样尝试一下应该能解决问题