美文网首页css
#5 React webpack设置postcss

#5 React webpack设置postcss

作者: JamesSawyer | 来源:发表于2016-12-11 12:51 被阅读2318次

    初次使用postcss,还不太熟练,配合css modules来给组件添加样式。

    1.首先先安装相应的包:

    npm install --save-dev postcss postcss-loader precss 
                           postcss-import postcss-scss autoprefixer
    
    • postcss-loader: 加载器
    • postcss-import: 可以使用 import someStyle from 'somewhere' 这种引入其他样式文件的语法, postcss-import
    • postcss-scss: 注意这个插件不是编译scss扩展的文件,而是提供解析 mixinsvariables 的能力,也可以说是提供sass中比较常见的2种功能的解析能力,需要配合下面的precss使用 postcss-scss解析器
    • precss: 这个包提供各种类似sass的语法,比如变量,条件语句,循环,@define-extends等功能 precss github
    • autoprefixer: 这个自动添加vendor前缀,十分强大,来源于caniuse

    2.webpack基本配置

    当然解析css文件还需要其他的一些加载器:

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

    这里就不详细介绍这些了。

    webpack.config.js:

    var AUTOPREFIXER_BROWSERS = [
      'Android 2.3',
      'Android >= 4',
      'Chrome >= 35',
      'Firefox >= 31',
      'Explorer >= 9',
      'iOS >= 7',
      'Opera >= 12',
      'Safari >= 7.1',
    ];
    module.exports = {
      // ...
      module: {
        loaders: [
        {
          test: /\.s?css$/,
          loaders: [
            'style-loader?sourceMap',
            'css-loader?modules&importLoaders=1&localIdentName=[path]__[name]__[local]___[hash:base64:5]',
            'postcss-loader?parser=post-scss'
          ]
        }
        ]
      },
      // ...
      },
      // 调用postcss中各种插件
      postcss: function plugins(bundler) {
        return [
          require('postcss-import')({ addDependencyTo: bundler }),
          require('postcss-precss')(),
          require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS })
        ]
      }
    

    完整的webpack.config.js文件(当然这只是用于开发阶段的配置):

    var webpack = require('webpack');
    var path = require('path');
    var AUTOPREFIXER_BROWSERS = [
      'Android 2.3',
      'Android >= 4',
      'Chrome >= 35',
      'Firefox >= 31',
      'Explorer >= 9',
      'iOS >= 7',
      'Opera >= 12',
      'Safari >= 7.1',
    ];
    
    module.exports = {
      devtool: '#inline-source-map',
      entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src/index.jsx'
      ],
      output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
      },
      resolve: {
        moduleDirectories: ['node_modules', 'src'],
        extensions: ['', '.js', '.jsx']
      },
      module: {
        loaders: [
          {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel'
          },
          {
            test: /\.s?css$/,
            loaders: [
                'style-loader?sourceMap',
                'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                'postcss-loader?parser=postcss-scss'
            ]
          },
          // {
          //   test: /\.jsx?$/,
          //   exclude: /node_modules/,
          //   loader: 'eslint-loader'
          // }
        ]
      },
      postcss: function plugins(bundler) {
        return [
          require('postcss-import')({ addDependencyTo: bundler }),
          require('precss')(),
          require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
        ];
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ]
    };
    
    

    另外附另一种使用sass-loader加载的方案部分配置:

    module: {
      loaders: [
        // ...
        {
          test: /\.sass/,
          loaders: [
            'style?sourceMap',
            'css?modules&importLoaders=1&localIdentName=[path]__[name]__[local]___[hash:base64:5]',
            'resolve-url',
            'sass?sourceMap'
          ]
        }
      ]
    }
    

    完结

    相关文章

      网友评论

        本文标题:#5 React webpack设置postcss

        本文链接:https://www.haomeiwen.com/subject/fpqpmttx.html