Webpack和PostCSS Autoprefixer不編譯Sass局部文件

我正在使用Webpack編譯Sass，而且PostCSS autoprefixer不能處理導入到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. 
}

是療法e缺少一個特殊的加載程序或語法，可以自動添加@import文件？

*編輯*

我能夠通過調整SCSS裝載機爲了解決這個問題。

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

來源

2017-09-15 Darren Cooney

是，訂貨事宜。 Webpack中的裝載機就像變換工具。一個加載器的輸出是下一個加載器的輸入。 – skyboyer

你可能想嘗試postcss-scss

我還提供了一種postcss.config.js：

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

好運

來源

2018-01-12 10:54:12

Webpack和PostCSS Autoprefixer不編譯Sass局部文件

回答

相關問題