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

写在前面

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

基本配置

我们先看一下目录结构

然后，我们在入口文件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：使用