2017-09-15 29 views
2

Webpack을 사용하여 Sass를 컴파일하고 PostcsS 자동 삽입자가 style.scss 진입 점으로 가져온 부분에 대해 작동하지 않습니다.Webpack 및 PostCSS Autoprefixer가 Sass 부분을 컴파일하지 않습니다

style.scss에 직접 스타일을 추가하는 것은 예상대로 접두사가 붙지 만 @import으로 참조되는 파일은 자동 접두사가되지 않습니다.

아래에서 참조 할 수 있도록 webpack.config, postcss.config 및 style.scss를 추가했습니다.

이 webpack.config.js

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var path = require('path'); 

module.exports = { 
    entry: ['./src/js/index.js', './src/scss/style.scss'], 
    output: { 
     filename: './js/bundle.js', 
     path: path.join(__dirname, 'dist'), 
     publicPath: './dist/' 
    }, 
    watch: true, 
    module: { 
     loaders: [ 
     { 
      test: /.jsx?$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 
     { 
      test: /\.(png|jpg|gif)$/, 
      use: [ 
       { 
        loader: 'url-loader', 
        options: {} 
       } 
      ] 
     }, 
     { 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: ['css-loader', 'sass-loader', 'postcss-loader'] 
      }), 
      exclude: /node_modules/, 
     } 
    ]}, 

    plugins: [ 
     new ExtractTextPlugin({ filename: './css/style.css' }) 
    ] 

}; 

postcss.config.js

module.exports = { 
    map: false, 
    plugins: { 
    'autoprefixer': {browsers: ['last 2 versions', '> 5%']}, 
    } 
} 

style.scss

@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); 
@import 'partials/admin'; 
@import 'partials/nav'; 
@import 'partials/photos'; 
@import 'partials/no-results'; 
.test{ 
    display: flex; // <- This is being prefixed as expected. 
} 

이 THER인가 특별한 로더 또는 구문 내가 누락되었습니다 @import 파일을 autoprefixed?

* EDIT *

내가 SCS들 로더의 순서를 조정하여이 문제를 해결 할 수 있었다.

{ 
test: /\.scss$/, 
use: ExtractTextPlugin.extract({ 
    fallback: "style-loader", 
    use: [ 
    { loader: 'css-loader' }, 
    { loader: 'postcss-loader' }, 
    { loader: 'sass-loader', 
     options: { 
      outputStyle: 'expanded' 
     }, 
    } 
    ] 
}), 
exclude: /node_modules/, 
} 
+0

예, 주문 사항. Webpack의 로더는 변형 도구와 같습니다. 하나의 로더의 출력은 다음 로더의 입력입니다. – skyboyer

답변

1

당신은 내가 더 postcss.config.js을 제공 postcss-scss

을 시도 할 수 있습니다 :

module.exports = { 
parser: 'postcss-scss', 
plugins: [ 
    require('autoprefixer'), 
] 
} 

행운