postcss-alias-config
v0.0.1
Published
This Postcss plugin allows you to use webpack resolve aliases from alias configs in css
Downloads
33
Readme
postcss-alias-config
This Postcss plugin allows you to use webpack resolve aliases from alias configs in css.
Example
alias.config.js
var path = require('path');
...
module.exports = {
...
alias: {
'@libs': path.join(__dirname, '/myLibs/')
}
...
};
or webpack.config.js
var path = require('path');
...
module.exports = {
...
resolve: {
...
alias: {
'@libs': path.join(__dirname, '/myLibs/')
}
}
...
};
Code:
@import url(//www.baid.com/test.css);
@import url(@/test.css);
.test1 {
background: url(@/images/a.png) no-repeat;
}
.tes2 {
background: url("@/images/a.png") no-repeat;
}
Transpiles to:
@import url(//www.baid.com/test.css);
@import url(../test.css);
.test1 {
background: url(../images/a.png) no-repeat;
}
.tes2 {
background: url("../images/a.png") no-repeat;
}
Installation
npm install --save-dev postcss-alias-config
Add the plugin to your postcss.config.js
. Optionally, add a path to a webpack config file, otherwise the plugin will look for alias.config.js
or app.config.js
or tsconfig.json
or jsconfig.json
or webpack.config.js
in the root where the build was run. Setting the config option will transform all alias destinations to be relative to the custom config.
postcss.config.js:
// postcss < 8
module.exports = {
plugins: {
"postcss-alias-config": { "config": "./configs/webpack.config.test.js" }
}
};
or postcss.config.js:
// postcss >= 8
module.exports = {
plugins: [
require('postcss-alias-config/lib/postcss8')
]
};