（如转载，请注明出处）
1.安装css-loader
npm install css-loader --save-dev
然后在webpack.config.js中配置：
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' }
]
},
然后在src目录下建立一个app.css文件，在app.js（你没看错，是app.js）文件中加入下面代码:
const css = require('./app.css');
运行npm run dev, 你会发现并没有什么用，css没有生效，这是因为我们还缺一个style-loader, 于是我们在终端输入npm install style-loader --save-dev，把webpack.config.js中的配置改为
module: {
rules: [
{ test: /\.css$/, loaders: 'style-loader!css-loader' }
]
},
终于，我们的CSS生效了！
如果我们有很多loaders需要加载，也可以将配置改成这样：
module: {
rules: [
{
test: /\.css$/, use: [ 'style-loader', 'css-loader']
}
]
},
2.安装sass-loader
在终端输入命令： npm install sass-loader node-sass webpack --save-dev
我们将上面的配置中加入sass-loader, 并将/\.css$/修改为/\.scss$/, 像这样：
test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader']
需要将我们的app.css文件改为app.scss, 而且不要忘记我们在app.js中引入的app.css一并改为app.scss,
然后我们运行npm run dev, 会发现缺少webpack-sources：
安装webpack-sources:
npm i webpack-sources --save-dev
再运行npm run dev, 成功！
2. 安装extract-text-webpack-plugin
有时我们想要将样式文件输出为独立文件，那么我们可能需要extract-text-webpack-plugin, 安装命令：
npm install --save-dev extract-text-webpack-plugin
然后在webpack.config.js中配置：
const ExtractTextPlugin = require("extract-text-webpack-plugin");
将test: /\.css$/, use: [ 'style-loader', 'css-loader'] 修改为：
test: /\.scss$/,
use: ExtractTextPlugin({
fallback: 'style-loader',
loader: ['css-loader', 'sass-loader'],
publicPath: 'dist'
})
并在plugins中添加： new ExtractTextPlugin("app.css") (其中文件名需要与我们建立的文件名一致)
也可以在plugin中这样写：
new ExtractTextPlugin({
filename: "app.css",
disable: false,
allChunks: true
})
