webpack配置css预处理

webpack默认只支持js的打包，不支持其它类型，为了让它支持样式的打包就需要加载一些loader

• 打包css文件

在webpack中配置对应的loader

在入口js文件中通过import导入样式

sass处理

# 安装css预处理loader

npm i -D style-loader css-loader sass-loader node-sass

module: {

rules: [

// scss处理

{

test: /\.scss$/,

// 执行顺序   从右到左，从下到上

use: [

"style-loader",

"css-loader",

"sass-loader"

]

}

]

}

在js入口文件中通过import导入scss文件

抽取单个css文件

# 安装插件 webpack4

npm i -D mini-css-extract-plugin

# 引入

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

# loader配置

module: {

rules: [

// scss处理

{

test: /\.scss$/,

use: [

MiniCssExtractPlugin.loader,

"css-loader",

"sass-loader"

]

}

]

}

# plugins配置

plugins: [

new MiniCssExtractPlugin({

filename: 'css/[name].css',

})

]