vue工程如何為組件自動(dòng)注入全局樣式文件
開發(fā)過程中，隨著工程變大，不免要提取出一些公共的樣式，如variables、mixins、functions等幾乎在所有業(yè)務(wù)組件中都會(huì)用到的樣式：
-- src
---- styles
-------- variables.less
-------- mixins.less
-------- functions.less
如果每個(gè)需要的組件都要手動(dòng)導(dǎo)入一次，就太繁瑣了：
<script lang="less"> @import "../styles/variables"; @import "../styles/mixins"; @import "../styles/functions"; // 其他樣式 </script>
當(dāng)然最直接的改進(jìn)方案是創(chuàng)建一個(gè)包含上面引入的入口樣式文件entry.less，然后在各組件中導(dǎo)入即可：
// entry.less @import './variables'; @import './mixins'; @import './functions';
<script lang="less"> @import "../styles/entry"; // 其他樣式 </script>
但是手動(dòng)導(dǎo)入畢竟繁瑣，若能夠自動(dòng)導(dǎo)入就大善了，所幸配置自動(dòng)導(dǎo)入也不繁瑣，下面以常用的Less、Stylus、Sass/Scss等預(yù)處理器為例說明如何在vue工程中配置自動(dòng)導(dǎo)入：
Less和Stylus
配置Less和Stylus自動(dòng)導(dǎo)入有兩種方案：
這里我們推薦使用第一種，因?yàn)榈诙N方案只是對(duì)第一種方案的包裝，且暫不支持熱更新。
安裝style-resources-loader
$ npm i -D style-resources-loader
配置vue.config.js
如果工程根目錄下沒有vue.config.js文件，手動(dòng)創(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
? ? ? ],
? ? })
}如果想要配置多個(gè)導(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òng)導(dǎo)入也可以使用上面的方案，但是使用其原生的方案更加便捷，只需在vue.config.js中配置即可：
// vue.config.js
module.exports = {
? css: {
? ? loaderOptions: {
? ? ? sass: {
? ? ? ? prependData: `@import "@/styles/entry.scss";` ?// A
? ? ? }
? ? }
? }
}如果想要配置多個(gè)導(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)建工程時(shí)，沒有選擇Manually select features，或者沒有選擇CSS Pre-processors，則工程內(nèi)默認(rèn)使用的是原生CSS，但是vue的默認(rèn)Webpack配置中已經(jīng)內(nèi)置了對(duì)CSS Pre-processors的支持，所以只需要安裝響應(yīng)依賴，然后再工程文件中使用對(duì)應(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
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)分頁查詢功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問題
這篇文章主要介紹了解決vscode進(jìn)行vue格式化,會(huì)自動(dòng)補(bǔ)分號(hào)和雙引號(hào)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie的問題
這篇文章主要介紹了解決vue項(xiàng)目本地啟動(dòng)時(shí)無法攜帶cookie,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了解決Vue的組件屬性this不存在問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue使用Axios庫請(qǐng)求數(shù)據(jù)時(shí)跨域問題的解決方法詳解
在 VUE 項(xiàng)目開發(fā)時(shí),遇到個(gè)問題,正常設(shè)置使用 Axios 庫請(qǐng)求數(shù)據(jù)時(shí),報(bào)錯(cuò)提示跨域問題,那在生產(chǎn)壞境下,該去怎么解決呢？下面小編就來和大家詳細(xì)講講2024-01-01
Vant 中的Toast設(shè)置全局的延遲時(shí)間操作
這篇文章主要介紹了Vant 中的Toast設(shè)置全局的延遲時(shí)間操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景詳析
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場(chǎng)景的相關(guān)資料,插槽（Slot）是Vue提出來的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下2021-06-06
Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會(huì)有不同的構(gòu)建策略,本文就來介紹下Vite 配置文件,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作
這篇文章主要介紹了全局安裝 Vue cli3 和 繼續(xù)使用 Vue-cli2.x操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)表單驗(yàn)證功能，基于NUXT的validate方法實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08