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

Question

我创建了一个 vue.config.js 文件来设置一些全局 sass 变量(就像 documentation 指定的那样)，但是当尝试访问组件中的变量时，我得到一个未定义的错误。在组件中手动添加相同的导入语句是可行的，但不知何故，它并没有从 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";
                `
            }
        }
    }
}

您可以在此处阅读更多信息:pre-loader docs