在vue项目中设置全局sass变量

Question

我创建了一个 vue.config.js 文件来设置一些全局 sass 变量（就像文档指定的那样），但是当尝试访问组件中的变量时，我收到未定义的错误。在组件中手动添加相同的导入语句是可行的，但不知何故，它没有从 vue.config.js 文件中获取。我检查了是否安装了 node-sass 和 sass-loader，并且 vue.config.js 位于项目根目录中（package.json 旁边）。我缺少什么？

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

Answer 1

改成data​prependData

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `
                    @import "@/assets/styles/_variables.scss";
                `
            }
        }
    }
}

您可以在这里阅读更多相关信息：预加载器文档

Answer 2

此代码适用于 vue3

安装：

萨斯

npm install -D sass-loader@^10 sass

纤维

npm install -D fibers

样式资源加载器

npm i style-resources-loader -D

在你的 vue.config.js （根级项目）

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/styles/scss/_variables.scss";
                `
            }
        }
    }
}enter image description here

符号@表示您的文件从 src 文件夹开始

Answer 3

如果没有完整的上下文，很难进行故障排除，因此您可以尝试以下几个选项：

1. 确保更改配置后已重新启动开发环境（重新运行yarn dev或npm run dev）

2. 将模板文字保留为一行，如文档中所使用的那样。这应该不会有什么不同，但也有可能。（例如data: `@import "@/assets/styles/_variables.scss";`）

3. 您可能知道，sass 文件前面的下划线表示 sass 部分。该示例中未使用部分，因此这也可能产生效果。（例如重命名_variables.scss为variables.scss并使用data: `@import "@/assets/styles/variables.scss";`）

4. 确保sass-loader、node-sass和css-loader软件包是最新的。

5. 尝试使用 后不带斜线的路径@。例如@assets/styles/_variables.scss。

6. 尝试用 a~代替@. 例如~assets/styles/_variables.scss。如果其他方法都不起作用，请尝试将其替换@为src。

祝你好运！