vue工程如何為組件自動注入全局樣式文件
開發(fā)過程中，隨著工程變大，不免要提取出一些公共的樣式，如variables、mixins、functions等幾乎在所有業(yè)務(wù)組件中都會用到的樣式：
-- src
---- styles
-------- variables.less
-------- mixins.less
-------- functions.less
如果每個需要的組件都要手動導(dǎo)入一次，就太繁瑣了：
<script lang="less"> @import "../styles/variables"; @import "../styles/mixins"; @import "../styles/functions"; // 其他樣式 </script>
當(dāng)然最直接的改進(jìn)方案是創(chuàng)建一個包含上面引入的入口樣式文件entry.less，然后在各組件中導(dǎo)入即可：
// entry.less @import './variables'; @import './mixins'; @import './functions';
<script lang="less"> @import "../styles/entry"; // 其他樣式 </script>
但是手動導(dǎo)入畢竟繁瑣，若能夠自動導(dǎo)入就大善了，所幸配置自動導(dǎo)入也不繁瑣，下面以常用的Less、Stylus、Sass/Scss等預(yù)處理器為例說明如何在vue工程中配置自動導(dǎo)入：
Less和Stylus
配置Less和Stylus自動導(dǎo)入有兩種方案：
這里我們推薦使用第一種，因?yàn)榈诙N方案只是對第一種方案的包裝，且暫不支持熱更新。
安裝style-resources-loader
$ npm i -D style-resources-loader
配置vue.config.js
如果工程根目錄下沒有vue.config.js文件，手動創(chuàng)建一下即可，然后插入以下代碼：
// vue.config.js
const path = require('path')
module.exports = {
? chainWebpack: config => {
? ? const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
? ? types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type))) ?// A
? },
}
function addStyleResource (rule) {
? rule.use('style-resource')
? ? .loader('style-resources-loader')
? ? .options({
? ? ? patterns: [
? ? ? ? path.resolve(__dirname, './src/styles/entry.less'), ?// B
? ? ? ],
? ? })
}如果想要配置多個導(dǎo)入，只需在B行后繼續(xù)添加即可：
patterns: [ ? path.resolve(__dirname, './src/styles/entry1.less'), ? path.resolve(__dirname, './src/styles/entry2.less'), ],
如果工程使用的是Stylus，則將A行替換為types.forEach(type => addStyleResource(config.module.rule(‘stylus’).oneOf(type)))，將B行替換為*path.resolve(__dirname, ‘./src/styles/entry.styl’)*即可。
Sass/Scss
其實(shí)Sass/Scss配置自動導(dǎo)入也可以使用上面的方案，但是使用其原生的方案更加便捷，只需在vue.config.js中配置即可：
// vue.config.js
module.exports = {
? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? prependData: `@import "@/styles/entry.scss";` ?// A
? ? ? }
? ? }
? }
}如果想要配置多個導(dǎo)入，只需在A行繼續(xù)添加即可：
// vue.config.js
module.exports = {
? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? prependData: `
? ? ? ? ? ? @import "@/styles/entry1.scss";
? ? ? ? ? ? @import "@/styles/entry2.scss";
? ? ? ? `
? ? ? }
? ? }
? }
}注意：sass-loader@8.0.0之前，要將上面的prependData替換為data。
擴(kuò)展
如果在使用vue create創(chuàng)建工程時，沒有選擇Manually select features，或者沒有選擇CSS Pre-processors，則工程內(nèi)默認(rèn)使用的是原生CSS，但是vue的默認(rèn)Webpack配置中已經(jīng)內(nèi)置了對CSS Pre-processors的支持，所以只需要安裝響應(yīng)依賴，然后再工程文件中使用對應(yīng)語法書寫樣式即可：
// Less $ npm i -D less less-loader // Sass/Scss $ npm i -D node-sass sass-loader // Stylus $ npm i -D stylus stylus-loader
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue?router如何實(shí)現(xiàn)tab切換
這篇文章主要介紹了vue?router如何實(shí)現(xiàn)tab切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何對一個數(shù)據(jù)過濾出想要的item問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue中實(shí)現(xiàn)左右聯(lián)動的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟
vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細(xì)步驟,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細(xì)步驟
這篇文章主要介紹了vue-cli2.0轉(zhuǎn)3.0之項目搭建的詳細(xì)步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue.delete()刪除對象的屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue 讀取HTMLCollection列表的length為0問題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家詳細(xì)介紹了Vue的列表之渲染,排序,過濾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了VUE項目實(shí)現(xiàn)主題切換的方法，本文通過多種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11