postcss-sprites不起作用
来源：4-3 文件处理（3）- 处理字体文件
qq_完美主义_3
2018-03-14
在没有加上处理字体文件loader之前图片可以自动合成雪碧图，加上处理字体文件后postcss-sprites就失效了，不知道是什么原因？
2回答
-
qq_完美主义_3
提问者
2018-03-14
var path = require('path')
var Webpack = require('webpack')
var PurifyCSS = require('purifycss-webpack')
var glob = require('glob-all')
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js',
chunkFilename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextWebpackPlugin.extract({
fallback: {
loader: 'style-loader',
options: { singleton: true }
},
use: [
{
loader: 'css-loader',
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-sprites')({
spritePath: 'dist/assets/imgs/',
retina: true
}),// 合成雪碧图
require('postcss-cssnext')()
]
}
}
]
})
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2000,
publicPath: '../assets/imgs/',
outputPath: './',
useRelativePath: true
}
},
{
loader: 'img-loader',
options: {
pngquant: {
quality: 80
}
}
}
]
},
{
test: /\.(eot|woff2|woff|ttf|svg)$/,
use: [
{
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 5000,
publicPath: '../assets/fonts/',
outputPath: './',
useRelativePath: true
}
}
]
}
]
},
plugins: [
new ExtractTextWebpackPlugin({
filename: 'css/[name].min.css',
allChunks: false
}),
new PurifyCSS({
paths: glob.sync([
path.join(__dirname, './*.html'),
path.join(__dirname, './src/*.js')
])
}),
new Webpack.optimize.UglifyJsPlugin()
]
}
022018-03-15 -
qbaty
2018-03-14
什么loader？ file-loader ？
00
相似问题