Webpack4系列教程(四) CSS相关配置

写在前面

在这篇博客中,我将会你介绍CSS部分的相关配置

基本配置

我们先看一下目录结构
Webpack4系列教程(四) CSS相关配置_第1张图片
然后,我们在入口文件index.js中引入base.less文件

import './css/base.less';

这样子是不行的。我们知道,webpack是只能识别JS的,对于Css及Less的处理,我们需要借助相应的loader

我们安装这几个loader

cnpm i -D less less-loader css-loader style-loader

rules中进行配置

module: {
    rules: [
        {
            test: /\.less$/,
            use: [
                { loader: 'style-loader' },
                { loader: 'css-loader' },
                { loader: 'less-loader' }
            ]
        }
    ]
}

loader的执行顺序是自右往左的,即less-loader - css-loader - style-loader

  1. less-loader:将less文件转换成css文件
  2. css-loader: 加载css文件
  3. style-loader:使用