我试图设置webpack有一个编译通过,它扫描所有的css文件在一个文件树,然后生成一个css文件与所有的样式捆绑,自动修复和最小化。
我不能让autoprefixer插件工作。
这是相关的webpack配置部分:
const webpack = require('webpack')
const path = require('path')
const glob = require('glob')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// postCSS plugins
const autoprefixer = require('autoprefixer')
module.exports = [
{
// another compilation pass
},
{
name: 'static-css',
entry: {
vendor: glob.sync(path.join(__dirname, 'assets/stylesheets/vendor/**/*.css')),
styles: glob.sync(path.join(__dirname, 'assets/stylesheets/src/**/*.css'))
},
devtool: 'source-map',
output: {
path: path.join(__dirname, 'assets/stylesheets/build/'),
filename: 'bundle.js',
},
module: {
loaders: [
// css loader for custom css
{
test: /.css$/,
include: path.join(__dirname, 'assets/stylesheets/src'),
loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
},
// css loader for vendor css
{
test: /.css$/,
include: path.join(__dirname, 'assets/stylesheets/vendor'),
loader: 'style-loader!css-loader'
},
// other loaders for images, fonts, and svgs
{
test: /.png$/,
loader: 'url-loader?limit=100000'
},
{
test: /.jpg$/,
loader: 'file-loader'
},
{
test: /.(woff|woff2)(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=application/font-woff'
},
{
test: /.ttf(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=application/octet-stream'
},
{
test: /.eot(?v=d+.d+.d+)?$/,
loader: 'file'
},
{
test: /.svg(?v=d+.d+.d+)?$/,
loader: 'url?limit=10000&mimetype=image/svg+xml'
}
],
postcss: function() {
return [
autoprefixer
]
}
},
plugins: [
// extract css in a .css file
new ExtractTextPlugin('[name].css')
]
}
];
当我运行webpack时,我得到所有压缩在bundle.js中的文件,并在单独的styles.css
文件中正确提取。但是vendor前缀不被应用。
我使用这个类来测试前缀:
.autoprefixer-test {
display: flex;
transition: all .5s;
background: linear-gradient(to bottom, white, black);
user-select: none;
}
我试图改变调用ExtractTextPlugin。像ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader'])
一样,在其他帖子中看到,但它根本没有帮助。
任何想法?
似乎你已经放错了postcss
参数。根据https://github.com/postcss/postcss-loader上的文档,下面的代码应该放在配置的顶层,而不是放在module
部分下面:
postcss: function() {
return [
autoprefixer
]
}
更新。
实际上,要使postcss和webpack的集成工作,需要编写更多的配置。多亏了下面的线程,我找到了解决方案https://github.com/postcss/postcss-loader/issues/8
首先,为了使postcss
能够在@import
'ed文件上工作,需要使用postcss-import
插件。要将此插件与webpack集成(例如。启用文件监视(热重新加载或重建),从初始化器的函数参数中获取的特殊参数作为参数传递给postcssImport
,如下所示:
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
....
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }), // should be first
autoprefixer
];
]
可悲的是,当使用url(...)
和相对路径时,这会破坏通过webpack加载资源。这是因为postcss-import
将所有@import
'ed文件合并为一个,但路径仍然相对于文件的初始目录。为了重写相对路径,应该使用postcss-url
插件,配置现在看起来像这样:
var autoprefixer = require('autoprefixer');
var postcssImport = require('postcss-import');
var postcssUrl = require('postcss-url');
....
postcss: function(webpack) {
return [
postcssImport({ addDependencyTo: webpack }),
postcssUrl(),
autoprefixer
];
]