Webpack5实战笔记----5.css-loader、style-loader和less-loader

安装css-loader,直接在终端输入命令：

npm i css-loader -D

在src目录下新建目录css,并在css下新建login.css文件 

//login.css的内容
.title {
    color: red;
}

在js目录下新建login.js文件 

//导入css文件login.css,如果有多个文件则用感叹号分隔，这是在文件中导入的方式
import 'css-loader!../css/login.css'

function login() {
    const o = document.createElement('h2')
    o.innerHTML = '刘德华'
    o.className = 'title'
    return o
}

document.body.appendChild(login())

 以下是第二种方法不需要在login中用到css-loader，但是在配置文件webpack.config.js中需要导入情况如下：

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // {
            //     //test一般就是一个正则表达式，用于匹配我们需要处理的文件类型
            //     test:/\.css$/,
            //     //use
            //     use:[
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            {
                //简写方式
                test: /\.css$/,
                use: ['css-loader']
            }
        ]
    }
}

 安装style-loader,直接在终端输入命令：

npm i style-loader -D

在 webpack.config.js文件里加入代码：

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // {
            //     //test一般就是一个正则表达式，用于匹配我们需要处理的文件类型
            //     test:/\.css$/,
            //     //use
            //     use:[
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader','css-loader']
            }
        ]
    }
}

再运行即可得出附带样式的结果。

安装less-loader,直接在终端输入命令：

安装less:

 npm i less -D

 在css目录下新建login.less文件，内容如下：

@bgColor:'green';
@fintSize:18px;

.title{
    background-color: @bgColor;
    font-size: @fintSize;
}

直接用node命令编译即可在本地生成index.css文件。

npx less ./src/css/login.less index.css

 我们需要将这个过程交给计算机动态地执行，安装less-loader

npm i less-loader -D

 在webpack.config.js中添加less-loader,注意添加顺序

const path = require('path')
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        //output必须设置绝对路径,所以这里导入path模块
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // {
            //     //test一般就是一个正则表达式，用于匹配我们需要处理的文件类型
            //     test:/\.css$/,
            //     //use
            //     use:[
            //         {
            //             loader:'css-loader'
            //         }
            //     ]
            // },
            {
                //简写方式
                test: /\.css$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader']
            },
            {
                //简写方式
                test: /\.less$/,
                //先执行style-loader再执行css-loader
                //顺序规则，从右往左，从下往上
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

直接生成并运行即可：