本文小編為大家詳細(xì)介紹“怎么打包與分離sass”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么打包與分離sass”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
成都創(chuàng)新互聯(lián)公司服務(wù)項目包括寧陜網(wǎng)站建設(shè)、寧陜網(wǎng)站制作、寧陜網(wǎng)頁制作以及寧陜網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，寧陜網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到寧陜省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
前言：package.json是npm中的包管理配置文件，webpack.config.js是webpack默認(rèn)的配置文件，webpack.plugin.js則是我為了使webpack.config.js看起來更清晰而提取出的一些配置內(nèi)容，顧名思義是提取出了插件的配置。
node_modules是執(zhí)行npminstall后依賴包的安裝目錄。
打包和分離sass
在項目目錄下安裝兩個包:
npminstall–save-devnode-sass
npminstall–save-devsass-loader
如果安裝不成功，需要把node_modules目錄刪除，重新npminstall安裝該目錄后，再次安裝這兩個包
編寫loader配置:
loader的配置要有先后順序
{
test:/\.scss$/,
use:[{
loader:"style-loader"http://createsstylenodesfromJSstrings},
{
loader:"css-loader"http://translatesCSSintoCommonJS},
{
loader:"sass-loader"http://compilesSasstoCSS}]}
src/index.html中插入一層關(guān)于sass的區(qū)塊
Sass文件的編寫：在src/css里面新建一個sassLe.scss文件
$nav-color:#fff;
#sassLearn
{
$width:100%;
width:$width;
height:30px;
background-color:$nav-color
;}
在src/entry.js里面引入sass
importsassfrom‘./css/sassLe.scss’
webpack后npmrunserver查看效果（但是此時#sassLearn是打包到entry.js當(dāng)中）
修改webpack-config.js里面的sass配置中的use
use:extractTextPlugin.extract({
use:[{
loader:'css-loader'},
{
loader:'sass-loader'
}],
fallback:'style-loader'
})
刪除dist文件夾webpack進(jìn)行打包，查看dist/css/index.css里有#sassLearn的樣式設(shè)置（即把sass和js文件已經(jīng)分離）
npmrunserver打開瀏覽器查看效果
讀到這里，這篇“怎么打包與分離sass”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
重慶分公司
重慶分公司
