您好,登錄后才能下訂單哦!
怎么在webpack中配置sass模塊?針對(duì)這個(gè)問題,這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答,希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。
安裝sass的依賴包
//在項(xiàng)目下,運(yùn)行下列命令行 npm install --save-dev sass-loader //因?yàn)閟ass-loader依賴于node-sass,所以還要安裝node-sass npm install --save-dev node-sass
css-loader使你能夠使用類似@import 和 url(…)的方法實(shí)現(xiàn) require()的功能;
style-loader將所有的計(jì)算后的樣式加入頁面中;
二者組合在一起使你能夠把樣式表嵌入webpack打包后的JS文件中。
下面是webpack.config.js文件的部分配置:
var ExtractTextPlugin = require('extract-text-webpack-plugin');//css樣式從js文件中分離出來,需要通過命令行安裝 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)行加載,以及<style lang="sass">...</style>聲明的內(nèi)部樣式進(jìn)行加載 { test: /\.scss$/, loader: ExtractTextPlugin.extract("style", 'css!sass') //這里用了樣式分離出來的插件,如果不想分離出來,可以直接這樣寫 loader:'style!css!sass' } ] }, //.vue文件的配置,以下是為了在.vue文件中使用ES6語法(必須安裝babel相關(guān)的依賴包),以及把使用css或sass語法的樣式提取出來,如果不需要可以忽略 vue: { loaders: { js: 'babel', css: ExtractTextPlugin.extract("css"), sass: ExtractTextPlugin.extract("css!sass") }, }, plugins: [ new ExtractTextPlugin("style.css") //提取出來的樣式放在style.css文件中 ] .... }
sass的使用如下,例如:
引入外部樣式,下面兩種寫法都可以使用:
import '../../css/test.scss' require('../../css/test2.scss');
在.vue文件中使用
<style lang="sass"> //sass語法樣式 </style>
關(guān)于怎么在webpack中配置sass模塊問題的解答就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,如果你還有很多疑惑沒有解開,可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。