(12/24) css進階：sass檔案的打包和分離
阿新 • • 發佈：2018-12-15
1.安裝sass打包的loader
這裡需要 在專案目錄下用npm安裝兩個包。node-sass和sass-loader，（也可以使用cnpm安裝）
因為sass-loader依賴於node-sass，所以需要先安裝node-sass
1.1 node-sass
npm install --save-dev node-sass
1.2 sass-loader
npm install --save-dev sass-loader
注意：在用npm安裝時，這個loader很容易安裝失敗，最好使用cnpm來進行安裝。如果你安裝一直報錯，最好是把node_modules資料夾刪除後，再重新安裝。
2.配置可直接進行SASS檔案分離的loader
若不需要sass檔案分離，參考上一節的配置方式
const extractTextPlugin = require("extract-text-webpack-plugin");
{ test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader:"sass-loader" }], // use style-loader in development fallback: "style-loader" }) }
extract-text-webpack-plugin分離外掛的相關使用。
3.新建檔案
3.1 scss檔案建立
注意這裡建立的檔案格式是scss格式的。
在src/css目錄下新建three.scss檔案，內容為：
$nav-color: #FFF; #sass_part { width: 100px; height:100px; background-color: $nav-color; color:#000 ; margin: 50px ; }
3.2 新增標籤
在src目錄下的index.html檔案中新增，如下：
<div id="sass_part">sass</div>
4. 在src目錄下的entry.js中引入scss檔案
import less from './css/three.scss'
5.打包
使用webpack命令進行打包。
webpack
結果打包到了index.css中。
6.啟動服務
使用命令npm run server 啟動服務。
npm run server
效果為：
相關原始碼：
webpack.config.js:
const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlPlugin= require('html-webpack-plugin');
const extractTextPlugin = require("extract-text-webpack-plugin");
var website ={
publicPath:"http://localhost:1818/"
}
module.exports={
//入口檔案的配置項
entry:{
entry:'./src/entry.js',
//這裡我們又引入了一個入口檔案
entry2:'./src/entry2.js',
},
//出口檔案的配置項
output:{
//輸出的路徑，用了Node語法
path:path.resolve(__dirname,'dist'),
//輸出的檔名稱
filename:'[name].js',
publicPath: website.publicPath
},
//模組：例如解讀CSS,圖片如何轉換，壓縮
module:{
rules: [
//針對.css的處理配置
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
//針對.less的處理配置
{
test: /\.less$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "less-loader"
}],
// use style-loader in development
fallback: "style-loader"//extract預設行為先使用css-loader編譯css，如果一切順利的話，結束之後把css匯出到規定的檔案去。但是如果編譯過程中出現了錯誤，則繼續使用vue-style-loader處理css
})
},
//針對scss的處理配置
{
test: /\.scss$/,
use: extractTextPlugin.extract({
use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}],
// use style-loader in development
fallback: "style-loader"
})
},
{
test:/\.(png|jpg|gif)/,
use:[{
loader:'url-loader',
options:{
limit:50,
outputPath:'images/'//圖片打包到images下
}
}
]
},
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
]
},
//外掛，用於生產模版和各項功能
plugins:[
// new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
}),
new extractTextPlugin("css/index.css")
],
//配置webpack開發服務功能
devServer:{
contentBase:path.resolve(__dirname,'dist'), //絕對路徑
host:'localhost',
compress:true,
port:1818
}
}
View Code
src/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div>
<div id="sass_part">sass</div>
<div id="less_part">less</div>
<img src="images/wfbin.png"/></div>
<div id="img"></div>
<div id="title"></div>
</body>
</html>
View Code
src/css/three.scss:
$nav-color: #FFF; #sass_part { width: 100px; height:100px; background-color: $nav-color; color:#000 ; margin: 50px; }View Code
src/entry.js（入口檔案）：
import css from './css/index.css' import less from './css/black.less' import less from './css/three.scss' document.getElementById('title').innerHTML='Hello Webpack';View Code