webpack5 处理样式资源

 处理样式资源 

Css、Lss、Sass、Scss、Style，借助loader来解析样式资源

webpack官网   概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网

1. 处理Css资源 

​ 若没有安装css-loader,直接使用webpack打包时就会报错：

​

 1. 安装css-loader： npm install --save-dev css-loader

 2. 引入 .css 文件   import css from "file.css"

// 要想webpack打包资源,必须引入该资源
import './css/index.css'

3. 配置文件 webpack.config.js

// 加载器
    module: {
        rules: [
            // css-loder的配置
            {
                test: /\.css$/,   //只检测.css文件
                //执行顺序:从右到左(从下到上)
                use: [
                    "style-loader",    //将js中css通过创建style标签添加到html文件中
                    "css-loader"],     //将css资源编译成commonjs的模块到js中
            },
        ]
    },

 运行npx webpack 时报错：

 报错原因：官网只提供下载 css-loader，并未提供下载 style-loader，但在配置文件中却使用到style-loader，所以我们只需下载 style-loader 就可以解决这个问题了 npm i style-loader -D：

 此时再次打包，编译成功：

 2. 处理Less资源

 1. 安装less-loader： npm install less less-loader --save-dev

 2. 引入 .less 文件 

import './less/index.less'

3. 配置文件 webpack.config.js

    // 加载器
    module: {
        rules: [
            // less-loder的配置
            {
                test: /\.less$/,
                // use:可以使用多个loader,  loader:只能使用一个loader
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',       //将js中less通过创建style标签添加到html文件中
                ],
            },
        ]
    },

 4. webpack打包：npx webpack

3. 处理 Scss 和 Sass 资源

1. 安装 sass-loader： npm install sass-loader sass webpack --save-dev

 2. 引入 .sass文件： import './style.scss'    /    import './style.sass'

3. 配置文件 webpack.config.js 

module: {
    rules: [
        // sass-loader的配置
        {
            test: /\.s[ac]ss$/,
            use: [
                'style-loader',     // 将 JS 字符串生成为 style 节点
                'css-loader',       // 将 CSS 转化成 CommonJS 模块
                'sass-loader',      // 将 Sass 编译成 CSS
            ],
        },
    ]
},

 4. webpack打包：npx webpack

4.  处理 stylus-loader 资源

1. 安装stylus 和 stylus-loader： npm install stylus stylus-loader --save-dev 

2. 引入.styl文件：  import './stylus/index.styl'

3. 配置文件 webpack.config.js 

module: {
    rules: [
         // stylus-loader的配置
        {
            test: /\.styl$/,
            use: [
                'style-loader',     
                'css-loader',       
                'stylus-loader',      // 将 stylus 编译成 CSS
            ],
        },
    ]
},

 4. webpack打包：npx webpack