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/,
}
예, 주문 사항. Webpack의 로더는 변형 도구와 같습니다. 하나의 로더의 출력은 다음 로더의 입력입니다. – skyboyer