在vue-cli 3中给stylus、sass样式传入共享的全局变量

在Vue CLI 3项目中，给Stylus和Sass样式引入共享全局变量是个常见需求，下面让我们深入理解并生动描述这一过程。

开发过程中，我们经常会定义许多基础样式变量，如颜色、字体、尺寸等，这些变量在多个Vue单文件组件中都会用到。如果每个组件都单独引入，显然会显得繁琐且低效。那么，如何全局引入这些变量呢？直接在main.js中引入variable.styl文件是行不通的。

经过对vue cli官方文档的查阅，我们发现其实有官方支持的方法来实现这一需求。

一、给Sass样式传入共享的全局变量

我们需要在vue.config.js文件中配置。这是一个向所有Sass样式传递共享全局变量的示例：

```javascript

// vue.config.js

module.exports = {

css: {

loaderOptions: {

sass: {

// “~”符号表示相对路径的别名，这里假设你有 `src/variables.scss` 这个文件

data: `@import "~@/variables.scss";`

}

}

}

}

```

这样配置后，你就可以在项目的任何Sass文件中使用在variables.scss中定义的全局变量了。

二、给Stylus样式传入共享的全局变量

Stylus的配置方式与Sass类似，也是在vue.config.js文件中进行配置：

```javascript

// vue.config.js 文件

module.exports = {

css: {

loaderOptions: {

stylus: {

import: '~@/mon/stylus/color.styl' // 这里假设你的全局变量在stylus文件中定义于此路径下

}

}

}

}

```

这样配置后，你就可以在项目的任何Stylus文件中使用在color.styl中定义的全局变量了。通过这种方式，你可以避免在每个组件中都重复引入相同的全局变量，提高开发效率和代码的可维护性。希望以上介绍对大家有所帮助。如果你有任何疑问或者需要进一步的解释，请随时联系我。感谢大家对狼蚁SEO网站的支持和关注！如果你认为这篇文章对你有帮助，欢迎转载分享，请务必注明出处。让我们共同学习进步！