怎么打包與分離sass

本文小編為大家詳細介紹“怎么打包與分離sass”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么打包與分離sass”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

　　前言：package.json是npm中的包管理配置文件，webpack.config.js是webpack默認的配置文件，webpack.plugin.js則是我為了使webpack.config.js看起來更清晰而提取出的一些配置內容，顧名思義是提取出了插件的配置。

　　node_modules是執行npminstall后依賴包的安裝目錄。

　　打包和分離sass

　　在項目目錄下安裝兩個包:

　　npminstall–save-devnode-sass

　　npminstall–save-devsass-loader

　　如果安裝不成功，需要把node_modules目錄刪除，重新npminstall安裝該目錄后，再次安裝這兩個包

　　編寫loader配置:

　　loader的配置要有先后順序

　　{

　　test:/\.scss$/,

　　use:[{

　　loader:"style-loader"//createsstylenodesfromJSstrings},

　　{

　　loader:"css-loader"//translatesCSSintoCommonJS},

　　{

　　loader:"sass-loader"//compilesSasstoCSS}]}

　　src/index.html中插入一層關于sass的區塊

　　<divid="sassLearn"></div>

　　Sass文件的編寫：在src/css里面新建一個sassLe.scss文件

　　$nav-color:#fff;

　　#sassLearn

　　{

　　$width:100%;

　　width:$width;

　　height:30px;

　　background-color:$nav-color

　　;}

　　在src/entry.js里面引入sass

　　importsassfrom&lsquo;./css/sassLe.scss&rsquo;

　　webpack后npmrunserver查看效果（但是此時#sassLearn是打包到entry.js當中）

　　修改webpack-config.js里面的sass配置中的use

　　use:extractTextPlugin.extract({

　　use:[{

　　loader:'css-loader'},

　　{

　　loader:'sass-loader'

　　}],

　　fallback:'style-loader'

　　})

　　刪除dist文件夾webpack進行打包，查看dist/css/index.css里有#sassLearn的樣式設置（即把sass和js文件已經分離）

　　npmrunserver打開瀏覽器查看效果

讀到這里，這篇“怎么打包與分離sass”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。