postcss-loader
Advanced tools
Package description
The postcss-loader npm package is a loader for webpack that allows you to use PostCSS to process CSS with JavaScript. It enables the use of PostCSS plugins to perform various operations on CSS files, such as autoprefixing, minification, and custom transformations.
Autoprefixing
Automatically adds vendor prefixes to CSS rules using values from Can I Use. It is useful for supporting multiple browser versions.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
]
}
]
}
};CSS Minification
Optimizes and minifies CSS files to reduce file size and improve load times.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('cssnano')()
]
}
}
}
]
}
]
}
};Custom Transformations
Applies custom transformations or future CSS features using PostCSS plugins.
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('postcss-custom-properties')()
]
}
}
}
]
}
]
}
};The sass-loader compiles Sass/SCSS files to CSS. It requires Node.js-style .sass/.scss files. Unlike postcss-loader, it's specifically designed for Sass pre-processing.
The less-loader processes .less files and compiles them to CSS. It's similar to postcss-loader in that it transforms styles, but it's tailored for the Less pre-processor.
This package is a webpack loader that compiles Stylus files to CSS. It's a pre-processor loader like sass-loader and less-loader, but for Stylus syntax.
Changelog
0.4.1
Readme
PostCSS loader for webpack to postprocesses your CSS with PostCSS plugins.
Set postcss section in webpack config:
var autoprefixer = require('autoprefixer-core');
var csswring = require('csswring');
module.exports = {
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: [autoprefixer, csswring]
}
Now your CSS files requirements will be processed by selected PostCSS plugins:
var css = require('./file.css');
// => CSS after Autoprefixer and CSSWring
If you want to process different styles by different PostCSS plugins you can
define plugin packs in postcss section and use them by ?pack=name parameter.
module.exports = {
module: {
loaders: [
{
test: /\.docs\.css$/,
loader: "style-loader!css-loader!postcss-loader?pack=cleaner"
},
{
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}
]
},
postcss: {
defaults: [autoprefixer, csswring],
cleaner: [autoprefixer({ browsers: [] })]
}
}
If you add ?safe=1 to requirement, PostCSS will try to correct any syntax
error that it finds in the CSS. For example, it will parse a { as a {}.
var css = require('postcss?safe=1!./broken')
FAQs
PostCSS loader for webpack
We found that postcss-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.