从"0"入手入门webpack4（二）:css篇 css-loader less-loader postcss-loader autoprefixer 加浏览器前缀css3兼容

一：css-loader

css几种常见的引用方式（除行内样式）：

1：链接式link

2：css内导入式 @import 或者行内样式

@import url("css/cssImport.css");

3：js导入式 import 

import './css/jsImport.css'

 

第三种js导入式  必须要使用loader

这个时候我们就要安装两个必备的包css-loader style-loader

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

然后在webpack.config 进行如下配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  devServer: {
    host: 'localhost',
    port: '8883',
    open: true, // 运行自动打开浏览器
    overlay: true, // 在编译出错的时候，在浏览器页面上显示错误，默认是false
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template: './index.html'
    })
  ]
}

此时可以看到效果

二：less-loader

平时开发中肯定要使用css预处理，这里拿less来举例。

npm install --save-dev less-loader less

1：我们在html中，添加dom测试

 

    
这里就是less显示的背景色了
 

 2：然后在src文件下新建index.less，并添加样式

section{
  padding: 50px 0;
  background-color: lightskyblue;
  .less-p{
    background-color: darkorange;
  }
}

3：然后在index.js中引入

import './index.less'

4：此时拓展webpack rules配置

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

看到下图，此时less-loader已经配置成功

 

 

 

 

 

三：postcss-loader autoprefixer

PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具，它有很多插件来转换css，可以大胆的使用未来语法。

我们用的最多的插件就是autoprefixer：自动添加浏览器前缀，添加css兼容性写法。

npm install --save-dev postcss-loader autoprefixer

然后合并css less配置。 

{
        test: /\.(le|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader',
          {
            loader: "postcss-loader"
          }
        ]
      }

在项目根目录创建 postcss.config.js

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

autoprefixer插件是在你打包的时候，自动添加浏览器前缀，下一篇将会介绍webpack打包，会看到postcss的效果