在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";
                `
            }
        }
    }
}

- Phendan

Answer 1

将data更改为prependData

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

您可以在此处阅读更多信息：预加载器文档。

- Krzysztof Kaczyński

---

如果您正在使用 .scss 文件，请使用 scss loaderOption 而不是 sass。否则，您可能会遇到 SassError: semicolons aren't allowed in the indented syntax 的错误。 - nonNumericalFloat

Answer 2

这段代码是针对Vue3的。

安装：

Sass

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 文件夹开始

- macJames

Answer 3

1. npm install --save-dev node-sass sass-loader
2. Create file 'vue.config.js' in the root

3. Add code below. Remember - @ refers to /src folder

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

4. Restart the project

- Serhii Kucherenko

Answer 4

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

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. 尝试使用~代替@。例如：~assets/styles/_variables.scss。如果其他方法都没有奏效，请尝试将@替换为src。

祝你好运！

- mccallofthewild

---

感谢您的帮助！澄清一下：当您说确保一切都是最新的时，是指最新版本还是仅指package.json中指定的版本？我尝试了其他所有方法，但遗憾的是没有解决问题。 - Phendan

@Phendan 没问题！我的意思是使用最新版本，或者至少是与文档API兼容的最低版本。全局变量API并不总是可用的。因此，除非这是一个新项目，否则升级软件包值得一试。 - mccallofthewild