请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

postcss-sprites不起作用

在没有加上处理字体文件loader之前图片可以自动合成雪碧图,加上处理字体文件后postcss-sprites就失效了,不知道是什么原因?


正在回答 回答被采纳积分+3

2回答

提问者 qq_完美主义_3 2018-03-14 16:18:31

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()

]

}


0 回复 有任何疑惑可以回复我~
  • qbaty #1
    只是加了一个url-loader 吗?
    回复 有任何疑惑可以回复我~ 2018-03-15 06:48:41
  • 提问者 qq_完美主义_3 #2
    其他内容没有更改,只是在module中加了处理字体文件的代码
    回复 有任何疑惑可以回复我~ 2018-03-15 15:12:24
qbaty 2018-03-14 15:59:03

什么loader? file-loader ?

0 回复 有任何疑惑可以回复我~
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信