autoprefixer和后CSS不是萨斯文件

Question

运行，我有以下的css和青菜的WebPack 2.0规则：

{ 
    test: /\.css$/, 
    use: [ 
     require.resolve('style-loader'), 
     { 
     loader: require.resolve('css-loader'), 
     options: { 
      importLoaders: 1 
     } 
     }, 
     { 
     loader: require.resolve('postcss-loader'), 
     options: { 
      // Necessary for external CSS imports to work 
      // https://github.com/facebookincubator/create-react-app/issues/2677 
      ident: 'postcss', 
      plugins:() => [ 
      require('postcss-flexbugs-fixes'), 
      autoprefixer({ 
       browsers: [ 
       '>1%', 
       'last 4 versions', 
       'Firefox ESR', 
       'not ie < 9' // React doesn't support IE8 anyway 
       ], 
       flexbox: 'no-2009' 
      }) 
      ] 
     } 
     } 
    ] 
    }, 
    { 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
     { 
      loader: 'css-loader', 
      query: { 
      modules: true, 
      sourceMap: true, 
      importLoaders: 2, 
      localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
     }, 
     'sass-loader' 
     ] 
    }) 
    }, 

我怎样才能获得autoprefixer和postcss与SASS文件运行？

Answer 1

你只需要添加postCSS加载器到你的sass规则。像

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [ 
     { 
      loader: 'css-loader', 
      query: { 
      modules: true, 
      sourceMap: true, 
      importLoaders: 2, 
      localIdentName: '[name]__[local]___[hash:base64:5]' 
      } 
     }, 
     { 
     loader: require.resolve('postcss-loader'), 
     options: { 
      // Necessary for external CSS imports to work 
      // https://github.com/facebookincubator/create-react-app/issues/2677 
      ident: 'postcss', 
      plugins:() => [ 
      require('postcss-flexbugs-fixes'), 
      autoprefixer({ 
       browsers: [ 
       '>1%', 
       'last 4 versions', 
       'Firefox ESR', 
       'not ie < 9' // React doesn't support IE8 anyway 
       ], 
       flexbox: 'no-2009' 
      }) 
      ] 
     } 
     }, 
     'sass-loader' 
     ] 
    }) 
    }, 

当然东西会是不错的定义postCSS装载机及以上两个规则中重复使用 - 为.css和.scss