處理style檔案

• 話說html都打包過去了，js也打包過去了，新的html檔案和js產生，如果更換了儲存資料夾(一般都會)，那麼這些打包生成的檔案對於資源的引入就會產生錯誤，那麼我們css檔案也需要重新處理過，避免路徑但不限於的錯誤；

安裝相關工具模組

• css-loader style-loader

#-D = --save-dev 放在前面後面都無所謂
npm i -D css-loader style-loader

配置css打包引數

• 配置css的打包規則，注意使用包的順序，就和script載入順序一個意思，後面看不到前面

{
   test: /\.css$/,
   use:
 
 ["style-loader", "css-loader"]
}

不知道其他部分程式碼的看我前兩篇webpack的文章，裡面有html和js的打包詳細教程。 這就是新生成的style.css檔案，並自動引入進去，當然，原來的css檔案自然會出現resourceload error錯誤；

• 如果我，用開發環境模式打包：

新的資料夾裡沒有style.css，按照原來的路徑肯定出錯

我的css：

但是，看控制檯Elements：

這裡自動增加了style標籤有沒有！

• 我們再看看打包好的js，裡面自動增加了一個控制css的程式碼，功能就是在head裡新增樣式表！

安裝處理SASS的工具

npm i -D sass-loader node-sass

• 還需要安裝檔案分離並獨立出來的外掛

npm i -D [email protected] # next代表最新版，因為3.x版本已經不支援安裝，而防止服務方沒有將預設指令指向最新版而主動申請更新最新版

可能會出現安裝到測試版，並無大礙：

使用extract-text-webpack-plugin外掛打包css

正常css檔案

• 重新配置引數：

使用檔案分離外掛，新增style.css

plugins: [
    new HtmlWebpackPlugin({ // Also generate a test.html
 

    	title: "new html",
        filename: 'test.html',
        template: "template.html"
    },
    new ExtractTextPlugin("style.css"))
],
module: {
    rules: [{
	        test: /\.js$/,
	        use: 'babel-loader',
	        exclude: /node_modules/
	    },
	    {
		    test: /\.css$/,
		    use: ExtractTextPlugin.extract({
		        fallback: "style-loader",
		        use: "css-loader"
		    })
	    }
	]
}

這次成功新建了style.css檔案並引入

不再是內聯樣式表，變成了外聯樣式檔案了。

SASS樣式表引入

• 我們先改成sass檔案，sass的好處在於清晰的樣式結構：

• 同時我們要修改引入：

生成的檔案不僅引入了樣式，還將style.scss重構成了正常的css檔案：

這就是css檔案的處理，scss真的非常好用，結構明顯，建議大家仔細瞭解一下。