(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