【问题标题】：Setting global sass variables in a vue project在 vue 项目中设置全局 sass 变量
【发布时间】：2019-05-10 05:43:06
【问题描述】：

我创建了一个 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";
                `
            }
        }
    }
}

【问题讨论】：

标签： vue.js sass configuration

【解决方案1】：

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

确保您在更改配置后重新启动了开发环境（重新运行 yarn dev 或 npm run dev）
将模板文字保持在一行，就像在文档中使用的那样。这不应该有什么不同，但它可能会。（例如data: `@import "@/assets/styles/_variables.scss";`）
您可能知道，sass 文件前面的下划线表示 sass 部分文件。示例中未使用分部，因此这也可能产生影响。（例如，将_variables.scss 重命名为variables.scss 并使用data: `@import "@/assets/styles/variables.scss";`）
确保 sass-loader、node-sass 和 css-loader 软件包是最新的。
尝试使用@ 后面不带斜线的路径。例如@assets/styles/_variables.scss。
尝试使用~ 而不是@。例如~assets/styles/_variables.scss。如果其他方法均无效，请尝试将 @ 也替换为 src。

祝你好运！

【讨论】：

感谢您的帮助！澄清点：当您说确保一切都是最新的时，您是指最新版本还是只是 package.json 中指定的版本？我尝试了其他所有方法，但遗憾的是并没有解决问题。
@Phendan 没问题！我的意思是最新版本，或者至少是与文档化 API 兼容的最低版本。全局变量 API 并不总是可用的。因此，除非它是一个新项目，否则升级软件包是值得的。

【解决方案2】：

npm install --save-dev node-sass sass-loader
在根目录下创建文件“vue.config.js”

在下面添加代码。 记住 - @ 指的是 /src 文件夹

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/assets/css/variables/_colors.scss";'
      }
    }
  }
}

重启项目

【讨论】：

【解决方案3】：

将data 更改为prependData

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

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

【讨论】：

【解决方案4】：

此代码适用于 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文件夹开始

【讨论】：