网站首页编程语言正文

webpack-loaders： postcss

作者：小强有个dream 更新时间： 2022-04-04 编程语言

postcss

A tool for transforming CSS with JavaScript 通过js转换css的工具

https://postcss.org/

npm i postcss-cli -D // 安装依赖

开始sample

 npm i -D postcss
 npm i postcss-cli@8.3.0 -D 
 // postcss *.css -o res.css   test.css       // 这个不会有变化
 npx postcss *.css --use autoprefixer -d build/    // 这个得到兼容的代码

结合webpack使用

module.exports = {
module: {
        rules: [
	            {
	                test: /\.css$/,
	                use: ['style-loader', 'css-loader',{
	                    loader: 'postcss-loader',
	                    options: {
	                        postcssOptions: {
	                            plugins: [
	                            // require('autoprefixer'),
	                            'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
	                        ]
	                        }
	                    }
	                }]
	            }
	        ]
	    }
 }

示例
示例样式
//src/css/image.css

@import url('./2.css');

i {
  width: 200px;
  height: 200px;
  background: linear-gradient(red, black);
}

::placeholder { // 需要加前缀(兼容后会添加浏览器厂商前缀)
  color: gray;
}

/ src/css/2.css

i {
  color: #33333315; // 需要兼容性处理 (兼容处理后得到rgba形式了)
}

/postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')
  ]
}

/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

原文链接：https://blog.csdn.net/qq_36413371/article/details/121250812

上一篇：webpack-loader: url-loader
下一篇：git: git commit时出现 -modified c

网站首页 编程语言 正文

webpack-loaders： postcss

postcss

开始sample

结合webpack使用

相关推荐

网站首页编程语言正文