mpvue全局引入sass文件的方法步驟
mpvue工程初始化的時(shí)候，使用sass的步驟
1.安裝依賴：
npm install sass-loader node-sass --save-dev
2.在.vue文件中的style節(jié)點(diǎn)加上lang=”scss”，這樣就可以愉快地使用sass進(jìn)行開發(fā)了，無需再webpack.base.config.js中配置loader，webpack會(huì)自動(dòng)識(shí)別.scss文件以及.vue中的scss代碼。
在使用sass開發(fā)的時(shí)候，我們經(jīng)常需要在各個(gè)頁面使用統(tǒng)一的變量，還有一些方法，這種公共的資源如果不進(jìn)行特殊處理的話，我們?cè)诿總€(gè)頁面都需要@import進(jìn)來才能使用，當(dāng)頁面多起來的話，后期維護(hù)起來可能會(huì)有點(diǎn)吃力，這里介紹在mpvue下如何處理sass全局引入sass資源文件的步驟：
1.首先需要安裝sass-resource-loader（我這里版本號(hào)是1.3.3）：
npm install sass-resources-loader --save-dev
2.然后是找到工程根目錄下的build/utils.js文件，我們新增一個(gè)loader對(duì)象
var sassResourceLoader = {
loader: 'sass-resources-loader',
options: {
resources: [
path.resolve(__dirname, '../src/assets/variables.scss'),
]
}
}
resources數(shù)組中，放的是需要引入的sass資源文件的路徑。
聲明對(duì)象的位置最好與其他loader同級(jí)
3. 然后改寫一下generateLoaders函數(shù)
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions, anotherLoader) {
var loaders = [cssLoader, px2rpxLoader, postcssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
if (!!anotherLoader) loaders.push(anotherLoader)
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
主要是改了兩個(gè)地方，就只是加了一個(gè)參數(shù)，加了一下判斷：
最后我們把自定義加上的loader加上去：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應(yīng)用開發(fā)之Vuex中的API Store View的使用，對(duì)Vue感興趣的同學(xué)，可以參考下2021-05-05
vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù),結(jié)合實(shí)例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了vue3使用el-upload上傳文件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Vue局部組件數(shù)據(jù)共享Vue.observable()的使用
隨著組件的細(xì)化，就會(huì)遇到多組件狀態(tài)共享的情況，今天我們介紹的是 vue.js 2.6 新增加的 Observable API ，通過使用這個(gè) api 我們可以應(yīng)對(duì)一些簡(jiǎn)單的跨組件數(shù)據(jù)狀態(tài)共享的情況，感興趣的可以了解一下2021-06-06
vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼
這篇文章主要介紹了vue scroller返回頁面記住滾動(dòng)位置的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01
最近發(fā)現(xiàn)很多要求Vue3的技術(shù)了,不得不說it技術(shù)的更新真的太快了,作為vue2老用戶,我們?cè)趯W(xué)習(xí)Vue3前應(yīng)該了解他們的區(qū)別以及背后的原因,下面這篇文章主要給大家介紹了關(guān)于vue2和vue3區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
利用vue+elementUI實(shí)現(xiàn)部分引入組件的方法詳解
這篇文章主要給大家介紹了關(guān)于利用vue+elementUI實(shí)現(xiàn)部分引入組件的相關(guān)資料，以及介紹了vue引入elementUI報(bào)錯(cuò)的解決方法，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼
常見的文件上傳方式可能就是new一個(gè)FormData，把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時(shí)的問題。所以本文將利用Vue+NodeJS實(shí)現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例
這篇文章主要為大家介紹了iView UI FORM 動(dòng)態(tài)添加表單項(xiàng)校驗(yàn)規(guī)則寫法實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01