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