本篇內(nèi)容主要講解“webpack怎么配置sass模塊的加載”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“webpack怎么配置sass模塊的加載”吧!

10年專注成都網(wǎng)站制作，企業(yè)網(wǎng)站設(shè)計(jì)，個(gè)人網(wǎng)站制作服務(wù)，為大家分享網(wǎng)站制作知識(shí)、方案，網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都白烏魚(yú)等多個(gè)行業(yè)，擁有豐富設(shè)計(jì)經(jīng)驗(yàn)。

為了使用sass，我們需要安裝sass的依賴包

//在項(xiàng)目下，運(yùn)行下列命令行

npminstall--save-devsass-loader

//因?yàn)閟ass-loader依賴于node-sass，所以還要安裝node-sass

npminstall--save-devnode-sass

當(dāng)然了，使用樣式的話，css-loader和style-loader也是必須的依賴包，如果沒(méi)有安裝，可以類似上述的方法安裝

css-loader使你能夠使用類似@import和url(…)的方法實(shí)現(xiàn)require()的功能；

style-loader將所有的計(jì)算后的樣式加入頁(yè)面中；

二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。

下面是webpack.config.js文件的部分配置：

varExtractTextPlugin=require('extract-text-webpack-plugin');//css樣式從js文件中分離出來(lái),需要通過(guò)命令行安裝extract-text-webpack-plugin依賴包

module.exports={

....

module:{

loaders:[

//解析.css文件

{

test:/\.css$/,

loader:ExtractTextPlugin.extract("style",'css')

},

//解析.vue文件

{

test:/\.vue$/,

loader:'vue'

},

//解析.scss文件,對(duì)于用import或require引入的sass文件進(jìn)行加載，以及...聲明的內(nèi)部樣式進(jìn)行加載

{

test:/\.scss$/,

loader:ExtractTextPlugin.extract("style",'css!sass')//這里用了樣式分離出來(lái)的插件，如果不想分離出來(lái)，可以直接這樣寫(xiě)loader:'style!css!sass'

}

]

},

//.vue文件的配置，以下是為了在.vue文件中使用ES6語(yǔ)法（必須安裝babel相關(guān)的依賴包），以及把使用css或sass語(yǔ)法的樣式提取出來(lái)，如果不需要可以忽略

vue:{

loaders:{

js:'babel',

css:ExtractTextPlugin.extract("css"),

sass:ExtractTextPlugin.extract("css!sass")

},

},

plugins:[

newExtractTextPlugin("style.css")//提取出來(lái)的樣式放在style.css文件中

]

....

}

sass的使用如下，例如：

引入外部樣式，下面兩種寫(xiě)法都可以使用：

import'../../css/test.scss'

require('../../css/test2.scss');

在.vue文件中使用

//sass語(yǔ)法樣式

到此，相信大家對(duì)“webpack怎么配置sass模塊的加載”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！