日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新