vue cli3配置sass全局变量报错

发布于 2022-09-11 23:31:39 字数 657 浏览 12 评论 0

vue.config.js代码如下

`module.exports = {

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

}`


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


组件代码如下:
image.png


报错结果
image.png

文件结构
image.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

南街九尾狐 2022-09-18 23:31:39

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
      }
    }
  },
  ...
}
一花一树开 2022-09-18 23:31:39

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文