处理css3新特性的兼容问题,这样就可以不用在css属性前加上厂商前缀。
    建一个postcss.config.js，这个配置文件(位置跟webpack.config.js一个位置)配置如下信息。

    1. // postcss.config.js
    2. // 需要配置这个插件信息
    3. module.exports = {
    4.     plugins: [
    5.         require('autoprefixer')({
    6.             overrideBrowserslist: [
    7.                 "Android 4.1",
    8.                 "iOS 7.1",
    9.                 "Chrome > 31",
    10.                 "ff > 31",
    11.                 "ie >= 8"
    12.             ]
    13.         })
    14.     ]
    15. };

    没有设置支持的浏览器，是不生效的

            {
            test: /\.scss$/,
            use: ['style-loader','css-loader','sass-loader','postcss-loader']
        }

    有时候，你会遇到这样子的一个问题，在某个scss文件中又导入新的scss文件，这个时候，打包的话，它就不会帮你重新从postcss-loader开始打包，这个时候，我们应该如何去设置呢，如下：

    // index.scss
@import './creare.scss';
body {
    .imgtitle {
        width: 100px;
        height: 100px;
        transform: translate(100px, 100px);
    }
}
    • 在我们之前配置的loader规则
    • 当js代码中引入scss模块的话，会按照这样子的规则去做

    • 在scss文件中引入scss文件，规则肯定不会从postcss-loader开始打包，所以我们需要配置一些信息。

            {
          test: /\.scss$/,
          use: ['style-loader',
              {
                  loader: 'css-loader',
                  options:{
                      importLoaders:2,
                      modules : true
                  }
              },
              'sass-loader',
              'postcss-loader'
          ]
      }

      在css-loader中配置options，加入importLoaders :2， 这样子就会走postcss-loader，和sass-loader，这样子的语法，无论你是在js中引入scss文件，还是在scss中引入scss文件，都会重新依次从下往上执行所以loader。
      那么modules:true这个配置是什么作用呢？有时候，你希望你的css样式作用的是当前的模块中，而不是全局的话，就需要加上这个配置。
      小结：

    • importLoaders:2该配置信息解决的就是在scss文件中又引入scss文件，会重新从postcss-loader开始打包

    • modules:true会作用域当前的css环境中，样式不会全局引入，语法上也需要使用如下引入：import style from ‘./index.scss’