less安装_Webpack4-(3)css、less、sass-loader抽离css文件以及浏览器前缀兼容插件

规则：

loader的引用会从右至左执行解析。

一、css-loader

css-loader解释(interpret)@import和url()，会import/require()后再解析(resolve)它们。

安装

npm install --save-dev css-loader style-loader

样式loader需要 style-loader来将css插入到head的style标签中。

我们可以在src目录下新建一个index.css文件，

body {
    background: red;
} 

在index.js中引入

require('./index.css')

配置

module.exports = {
    module: {   // 模块
        rules: [    // 规则
            { 
                test: /.css$/,
                use: [
                    { 
                        loader: 'style-loader',
                        options: {  // 配置
                            // insertHead: 'top',    // 将模板中的style标签置于顶部
                        }
                    }, 
                    'css-loader']
            },
        ]
    }
}

css-loader 负责解析@import这种语法; style-loader 把css 插入到head的style标签中。默认是从右到左执行loader。

运行

npm run dev

打开本地服务地址就会发现你写的样式已生效。

二、less-loader

less-loader将less语法转换为css

安装

npm install --save-dev less less-loader 

同样的需要在打包的入口js文件中引入。

require('./index.less')

这里需要你自己新建 index.less文件，写入自己的样式。

配置

module.exports = {
    module: {   // 模块
        rules: [    // 规则
            {   // less-loader
                test: /.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {  // 配置

                        }
                    },
                    'css-loader',
                    'less-loader',  // 把less -> css
                ]
            }
        ]
    }
}

运行

npm run dev

这样就能看到你定义的样式。

三、sass-loader

安装

npm install --save-dev sass-loader node-sass

在入口文件引入，

require('./index.scss')

这里需要你自己新建 index.scss文件，写入自己的样式。

配置

module.exports = {
    module: {   // 模块
        rules: [    // 规则
            {   // css-loader
                test: /.css$/,
                use: [
                    'style-loader',
                    'css-loader']
            },
            {   // sass-loader
                test: /.scss$/,
                use: [
                    'sass-loader',
                ]
            }
        ]
    }
}

这里我们在 sass-loader之前匹配了 style-loader和css-loader，可以不用配置。

运行

npm run build

可以看到自己定义的sass样式。

四、抽离css样式插件

我们需要将css样式抽离成一个文件。

mini-css-extract-plugin

抽离css的插件，官方使用的是 extract-text-webpack-plugin(不过好像已经废弃了)。

安装

npm install --save-dev mini-css-extract-plugin

配置

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

module.exports = {
    plugins: [   // 存放所有webpack插件配置
        new MIniCssExtractPlugin({     // 抽离css样式插件
            filename: 'main.[hash:8].css',    // 抽离后的文件名
        })
    ],
    module: {   // 模块
        rules: [    // 规则
            {   // css-loader
                test: /.css$/,
                use: [
                    MIniCssExtractPlugin.loader,    // 抽离css样式
                    'css-loader']
            },
            {   // sass-loader
                test: /.scss$/,
                use: [
                    'sass-loader',
                ]
            }
        ]
    }
}

运行

npm run build

打包后的目录中就可以看见生成的css文件。、

五、css样式兼容性前缀插件

css样式自动加浏览器前缀插件autoprefixer

此插件依赖于postcss-loader来添加css前缀。

安装

npm install --save-dev postcss-loader autoprefixer

配置

{   // css-loader
    test: /.css$/,
    use: [
        MIniCssExtractPlugin.loader,    // 抽离css样式
        'css-loader',
        'postcss-loader',    // 浏览器前缀插件loader

    ]
},

注意： postcss-loader必须配置在 css-loader之前 。

postcss-loader需要一个配置文件用来加载自定义的相关配置，

在项目目录下，新建一个postcss.config.js ，用来加载autoprefixer插件。

 module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

在你的css、less、scss文件中写入将浏览器前缀的样式，

例如：

html{
    body{
        transform: rotate(45deg);
    }
}

运行

npm run build

将会在打包好的.css文件中自动加入浏览器前缀：

html body {
  background: red;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg); }