在vue-cli 3中， 給stylus、sass樣式傳入共享的全局變量

在開發中有時，我們定義了大量的基礎樣式變量，例如：

大量的vue單文件組件會用到這些變量，每個組件都引人一次又太麻煩。全局引入是個不錯的方法，于是，在main.js 中引入variable.styl文件，但是你會發現，并不起作用。

在查閱了vue cli官方文檔后發現，有官方支持的方法。

1、給sass樣式傳入共享的全局變量

有的時候你想要向 webpack 的預處理器 loader 傳遞選項。你可以使用vue.config.js中的css.loaderOptions選項。比如你可以這樣向所有 Sass 樣式傳入共享的全局變量：

// vue.config.js

module.exports = {

css: {

loaderOptions: {

// 給 sass-loader 傳遞選項

sass: {

// @/ 是 src/ 的別名

// 所以這里假設你有 `src/variables.scss` 這個文件

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

}

}

}

}

2、給stylus樣式傳入共享的全局變量

// vue.config.js 文件

module.exports = {

css: {

loaderOptions: {

// 給 stylus-loader 傳遞選項

stylus: {

import: '~@/common/stylus/color.styl'

}

}

}

}

總結

以上所述是小編給大家介紹的在vue-cli 3中給stylus、sass樣式傳入共享的全局變量,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

總結

以上是生活随笔為你收集整理的vuecli3 引入全局scss变量_在vue-cli 3中给stylus、sass样式传入共享的全局变量的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。