Closed minooo closed 8 years ago
Hi @minooo!
As other PostCSS plugins, Assets with Webpack is configured with postcss-loader:
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: function () {
return [
require('postcss-assets')({
loadPaths: ['images/']
})
];
}
}
Thank you!
Is it still the right answer? I am trying to attach postcss-assets
but it doesn't seem to work at all. I have an image server at:
./src/agent/assets/duck-2.png
Here is my webpack config for css:
{
test: /(\.css)$/,
include: path.resolve(__dirname, 'src'),
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require("postcss-assets")({
loadPaths: ["common/assets/", 'agent/assets/'],
relativeTo: 'src',
}),
require('./server/camelizeSelectors'),
require('postcss-modules-local-by-default')(),
require('postcss-import')({path: path.resolve(__dirname, 'src')}),
require('postcss-image-set-polyfill')(),
require('postcss-color-function')(),
require('postcss-cssnext')(),
]
}
}
]
}
As you can see above I use plenty of plugins but only postcss-assets
doesn't seem to be working. I have following css file:
@import "common/styles/theme.css";
html,
body {
background: resolve('duck-2.png');
}
html,
body,
body * {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: content-box;
font-family: "Roboto", sans-serif;
}
And for some reason in compiled CSS file I still see property unresolved:
html,
body {
background: resolve('duck-2.png');
}
I did some debugging of plugin and the only thing I found is that I pass into plugins Processor
object of following structure:
Processor {
version: 5.2.18,
plugins: [function#appendInputDir(css), function#(css)],
postcssPlugin: postcss-assets,
postcssVersion: 5.2.18
}
I do not know how to use it with webpack. It is better to give a config :)