點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

webpack4 處理SCSS的方法示例

來源：懂視網責編：小采時間：2020-11-27 22:08:37

webpack4 處理SCSS的方法示例

webpack4 處理SCSS的方法示例:這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。 1. 準備工作為了方便敘述，這次代碼目錄的樣式文件只有一個scss文件，以幫助我們了解核心 LOADER 的使用。下圖展示了這次的目錄代碼結構：目錄結構這次我們需

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack4 處理SCSS的方法示例:這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。 1. 準備工作為了方便敘述，這次代碼目錄的樣式文件只有一個scss文件，以幫助我們了解核心 LOADER 的使用。下圖展示了這次的目錄代碼結構：目錄結構這次我們需

這節課講解webpack4中處理scss。只需要在處理css的配置上增加編譯scss的 LOADER 即可。

1. 準備工作

為了方便敘述，這次代碼目錄的樣式文件只有一個scss文件，以幫助我們了解核心 LOADER 的使用。

這次我們需要用到node-sass，sass-loader等 LOADER，package.json如下：

{
 "devDependencies": {
 "css-loader": "^1.0.0",
 "extract-text-webpack-plugin": "^4.0.0-beta.0",
 "node-sass": "^4.9.2",
 "sass-loader": "^7.0.3",
 "style-loader": "^0.21.0",
 "webpack": "^4.16.0"
 }
}

其中，base.scss代碼如下：

$bgColor: red !default;
*,
body {
 margin: 0;
 padding: 0;
}
html {
 background-color: $bgColor;
}

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>Document</title>
</head>
<body>
 <script src="./dist/app.bundle.js"></script>
</body>
</html>

2. 編譯打包scss

首先，在入口文件app.js中引入我們的 scss 樣式文件：

import "./scss/base.scss";

下面，開始編寫webpack.config.js文件:

const path = require("path");

module.exports = {
 entry: {
 app: "./src/app.js"
 },
 output: {
 publicPath: __dirname + "/dist/",
 path: path.resolve(__dirname, "dist"),
 filename: "[name].bundle.js"
 },
 module: {
 rules: [
 {
 test: /\.scss$/,
 use: [
 {
 loader: "style-loader" // 將 JS 字符串生成為 style 節點
 },
 {
 loader: "css-loader" // 將 CSS 轉化成 CommonJS 模塊
 },
 {
 loader: "sass-loader" // 將 Sass 編譯成 CSS
 }
 ]
 }
 ]
 }
};

需要注意的是，module.rules.use數組中，loader 的位置。根據 webpack 規則：放在最后的 loader 首先被執行。所以，首先應該利用sass-loader將 scss 編譯為 css，剩下的配置和處理 css 文件相同。

3. 檢查打包結果

因為 scss 是 css 預處理語言，所以我們要檢查下打包后的結果，打開控制臺，如下圖所示：

同時，對于其他的 css 預處理語言，處理方式一樣，首先應該編譯成 css，然后交給 css 的相關 loader 進行處理。

處理sass文件

1.安裝sass和sass-loader

cnpm i node-sass sass-loader -D

創建一個src/sass/a.sass文件

$color:green;

#div2{
color: $color;
}

module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,里面包含一條一條的規則
rules:[
{
// test 表示測試什么文件類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:'css-loader',
publicPath:'../' //解決css背景圖的路徑問題
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分離less編譯后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 這里的options選項參數可以定義多大的圖片轉換為base64
limit:50000, // 表示小于50kb的圖片轉為base64,大于50kb的是路徑
outputPath:'images' //定義

輸出的圖片文件夾 } }] } ] },

自動添加css前綴

postCss 預處理器

專門處理css平臺

1.下載

cnpm i postcss-loader autoprefixer -D

2.準備建一個 postcss.config.js文件配置postcss的

module.exports = {
plugins:[
require('autoprefixer') // 自動添加css前綴
]
}

3.配置postcss-loader,自動添加css前綴

module:{ //我寫一個module
//配置一個rules(規則),rules是一個數組,里面包含一條一條的規則
rules:[
{
// test 表示測試什么文件類型
test:/\.css$/,
// 使用 'style-loader','css-loader'
use:ExtractTextPlugin.extract({
fallback:'style-loader', // 回滾
use:[
{loader:'css-loader'},
{loader:'postcss-loader'} //利用postcss-loader自動添加css前綴
],
publicPath:'../' //解決css背景圖的路徑問題
})
},
{
test:/\.less$/,
use:ExtractTextPlugin.extract({ //分離less編譯后的css文件
fallback:'style-loader',
use:['css-loader','less-loader']
})
},
{
test:/\.(sass|scss)$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(png|jpg|gif)$/,
use:[{
loader:'url-loader',
options:{ // 這里的options選項參數可以定義多大的圖片轉換為base64
limit:50000, // 表示小于50kb的圖片轉為base64,大于50kb的是路徑
outputPath:'images' //定義

輸出的圖片文件夾 } }] } ] },

自動消除冗余的css代碼

使用Purifycss

1.下載

cnpm i purifycss-webpack purify-css -D

2.引入插件

const PurifyCssWebpack = require('purifycss-webpack');

3.需要引入一個額外模塊,glob掃描路徑

cnpm i glob -D

4.引入glob

const glob = require('glob');

5.在plugins里面配置

plugins:[
// Uglify是壓縮js,現在已經不需要了,只需要在script里面寫成
// "build": "webpack --mode production", 就自動壓縮額
//new Uglify(), 
new Webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
title:'Hello World',
template: './src/index.html' //模板地址
}),
new ExtractTextPlugin('css/index.css'), //都提到dist目錄下的css目錄中,文件名是index.css里面
new PurifyCssWebpack({ //消除冗余代碼
// 首先保證找路徑不是異步的,所以這里用同步的方法
// path.join()也是path里面的方法,主要用來合并路徑的
// 'src/*.html' 表示掃描每個html的css
paths:glob.sync(path.join(__dirname,'src/*.html')) 
})
]

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack4 處理SCSS的方法示例

推薦度：

點擊下載本文 文檔為doc格式

標簽： webpack4 scss的處理scss的方法示例

熱門焦點

webpack4 處理SCSS的方法示例

webpack4 處理SCSS的方法示例

webpack4 處理SCSS的方法示例

最新推薦

猜你喜歡

熱門推薦