您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue-loader如何使用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue-loader如何使用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
Vue-loader其實就是一個webpack的loader,用來把vue組件轉(zhuǎn)換成可部署的js, html, css模塊。
預(yù)處理器示例(sass-loader)
在webpack中,所有預(yù)處理器都要匹配相應(yīng)的loader。vue-loader允許其他的webpack-loader處理組件中的一部分,然后它根據(jù)lang屬性自動判斷出要使用的loaders。
以scss為例,只要安裝處理sass/scss的loader,就能在vue中使用scss了。
現(xiàn)在我們來安裝sass/scss loader:
npm install -D sass-loader node-sass
vue-loader允許能根據(jù)lang屬性自動判斷出要使用的loaders,它是怎么樣做到的?下面來看一看最核心部分的源代碼:
exports.cssLoaders = function (options) { options = options || {} var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } // generate loader string to be used with extract text plugin function generateLoaders (loader, loaderOptions) { var loaders = [cssLoader] if (loader) { loaders.push({ loader: loader + '-loader', options: Object.assign({}, loaderOptions, { sourceMap: options.sourceMap }) }) } // 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) } } // https://vue-loader.vuejs.org/en/configurations/extract-css.html return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') } }
讀到這里,這篇“Vue-loader如何使用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。