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局部文件

回答

相关问题