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