postcss安装和使用示例详解

npm install postcss --save-dev

   npm install autoprefixer --save-dev

   module.exports = {
     plugins: [
       require('autoprefixer')({
         /* autoprefixer的配置选项 */
       }),
       // 其他插件...
     ]
   };

   // webpack.config.js
   module.exports = {
     module: {
       rules: [
         {
           test: /\.css$/,
           use: [
             'style-loader',
             'css-loader',
             {
               loader: 'postcss-loader',
               options: {
                 postcssOptions: { // 或直接引用config文件路径：'config': './path/to/postcss.config.js'
                   plugins: [require('autoprefixer')]
                 }
               }
             }
           ]
         }
       ]
     }
   };

   postcss src/index.css -o build/index.css

// webpack.config.js
const path = require('path');
module.exports = {
  // ...其他配置项...
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配.css文件
        use: [
          'style-loader', // 将CSS注入到JS中，以便动态加载至页面
          'css-loader', // 解析CSS文件中的import和其他加载器不能识别的语法
          {
            loader: 'postcss-loader', // 引入PostCSS-loader
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, 'postcss.config.js'), // 引入PostCSS配置文件
              },
            },
          },
        ],
      },
    ],
  },
  // ...其他配置项...
};

// postcss.config.js
module.exports = {
  plugins: [
    // 自动添加CSS前缀
    require('autoprefixer')({
      overrideBrowserslist: ['last 2 versions'],
    }),
    // 将px转换为vw（响应式单位转换）
    require('postcss-px-to-viewport')({
      viewportWidth: 750, // 视窗宽度
      unitPrecision: 3, // 单位换算的精度
      viewportUnit: 'vw', // 换算后的单位
      selectorBlackList: ['.ignore'], // 不转换的类名
      minPixelValue: 1, // 最小转换数值
      mediaQuery: false, // 是否在媒体查询中也转换
    }),
    // CSS优化
    require('cssnano')({
      preset: 'default', // 使用默认的优化配置
    }),
  ],
};

npx postcss input.css -o output.css --config postcss.config.js

// 先确保已安装必要的插件
npm install gulp-postcss gulp-sourcemaps autoprefixer --save-dev
// 在gulpfile.js中配置PostCSS任务
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('process-css', function () {
  var processors = [
    require('autoprefixer')({/* autoprefixer选项 */}),
    // 添加其他所需的PostCSS插件
  ];
  return gulp.src('src/**/*.css')
    .pipe(sourcemaps.init()) // 初始化源映射
    .pipe(postcss(processors)) // 运行PostCSS处理
    .pipe(sourcemaps.write('.')) // 写出源映射文件
    .pipe(gulp.dest('dist')); // 输出处理过的CSS文件到dist目录
});

// 先确保已安装必要的插件
npm install grunt-postcss autoprefixer --save-dev
// 在Gruntfile.js中配置PostCSS任务
module.exports = function(grunt) {
  grunt.loadNpmTasks('grunt-postcss');
  grunt.initConfig({
    postcss: {
      options: {
        map: true, // 生成sourcemaps
        processors: [
          require('autoprefixer')({/* autoprefixer选项 */}),
          // 添加其他所需的PostCSS插件
        ]
      },
      dist: {
        src: 'src/**/*.css',
        dest: 'dist/'
      }
    }
  });
  grunt.registerTask('default', ['postcss']);
};

// 先确保已安装必要的插件
npm install rollup-plugin-postcss autoprefixer --save-dev
// 在rollup.config.js中配置PostCSS插件
import postcss from 'rollup-plugin-postcss';
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    postcss({
      extensions: ['.css'], // 处理哪些扩展名的文件
      extract: 'dist/bundle.css', // 抽取出CSS到单独文件
      plugins: [
        require('autoprefixer')({/* autoprefixer选项 */})
        // 添加其他所需的PostCSS插件
      ]
    })
  ]
};

   // 举例：在Gulp中结合browser-sync与PostCSS
   var browserSync = require('browser-sync').create();
   gulp.task('serve', function() {
     browserSync.init({
       server: {
         baseDir: './dist'
       }
     });
     gulp.watch('src/**/*.css', gulp.series('process-css', browserSync.reload));
   });

   // 在PostCSS配置文件中添加stylelint和stylefmt
   module.exports = {
     plugins: [
       require('stylelint')(), // CSS代码风格检查
       require('stylefmt')({ /* stylefmt选项 */ }), // 格式化CSS代码
       // 其他插件...
     ]
   };

   // 在Webpack配置中启用CSS Modules
   {
     test: /\.css$/,
     use: [
       'style-loader',
       'css-loader?modules',
       {
         loader: 'postcss-loader',
         options: {
           postcssOptions: {
             plugins: [
               require('postcss-modules')()
             ]
           }
         }
       }
     ]
   }