Webpack——CSS打包，CSS、SASS处理

处理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 extract-text-webpack-plugin@next # next代表最新版，因为3.x版本已经不支持安装，而防止服务方没有将默认指令指向最新版而主动申请更新最新版

可能会出现安装到测试版，并无大碍：

extract-text-webpack-plugin插件使用方法

使用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真的非常好用，结构明显，建议大家仔细了解一下。