sfcode
An Online Competing and Development Environment
|
**postcss.config.js
**
You can read more about common PostCSS Config here.
You can use different postcss.config.js
files in different directories. Config lookup starts from path.dirname(file)
and walks the file tree upwards until a config file is found.
After setting up your postcss.config.js
, add postcss-loader
to your webpack.config.js
. You can use it standalone or in conjunction with css-loader
(recommended). Use it after css-loader
and style-loader
, but before other preprocessor loaders like e.g sass|less|stylus-loader
, if you use any.
**webpack.config.js
**
⚠️ When
postcss-loader
is used standalone (withoutcss-loader
) don't use@import
in your CSS, since this can lead to quite bloated bundles
**webpack.config.js
(recommended)**
Name | Type | Default | Description |
---|---|---|---|
exec | {Boolean} | undefined | Enable PostCSS Parser support in CSS-in-JS |
parser | {String\|Object} | undefined | Set PostCSS Parser |
syntax | {String\|Object} | undefined | Set PostCSS Syntax |
stringifier | {String\|Object} | undefined | Set PostCSS Stringifier |
config | {Object} | undefined | Set postcss.config.js config path && ctx |
plugins | {Array\|Function} | [] | Set PostCSS Plugins |
sourceMap | {String\|Boolean} | false | Enable Source Maps |
If you use JS styles without the postcss-js
parser, add the exec
option.
**webpack.config.js
**
Name | Type | Default | Description |
---|---|---|---|
path | {String} | undefined | PostCSS Config Directory |
context | {Object} | undefined | PostCSS Config Context |
You can manually specify the path to search for your config (postcss.config.js
) with the config.path
option. This is needed if you store your config in a separate e.g ./config || ./.config
folder.
⚠️ Otherwise it is unnecessary to set this option and is not recommended
⚠️ Note that you can't use a filename other than the supported config formats, this option only allows you to manually specify the directory where config lookup should start from
**webpack.config.js
**
Name | Type | Default | Description |
---|---|---|---|
env | {String} | ‘'development’\ilinebr </td> <td class="markdownTableBodyLeft"> process.env.NODE_ENV<tt>\ilinebr </td> </tr> <tr class="markdownTableRowEven"> <td class="markdownTableBodyCenter">file\ilinebr </td> <td class="markdownTableBodyCenter"> {Object}\ilinebr </td> <td class="markdownTableBodyCenter"> loader.resourcePath<tt>\ilinebr </td> <td class="markdownTableBodyLeft">extname, dirname, basename\ilinebr </td> </tr> <tr class="markdownTableRowOdd"> <td class="markdownTableBodyCenter"> options\ilinebr </td> <td class="markdownTableBodyCenter"> {Object}\ilinebr </td> <td class="markdownTableBodyCenter"> {}` | Options |
postcss-loader
exposes context ctx
to the config file, making your postcss.config.js
dynamic, so can use it to do some real magic ✨
**postcss.config.js
**
**webpack.config.js
**
**webpack.config.js
**
⚠️ webpack requires an identifier (
ident
) inoptions
when{Function}/require
is used (Complex Options). Theident
can be freely named as long as it is unique. It's recommended to name it (‘ident: 'postcss’`)
Name | Type | Default | Description |
---|---|---|---|
parser | {String\|Function} | undefined | Custom PostCSS Parser |
syntax | {String\|Function} | undefined | Custom PostCSS Syntax |
stringifier | {String\|Function} | undefined | Custom PostCSS Stringifier |
**webpack.config.js
**
**webpack.config.js
**
**webpack.config.js
**
Enables source map support, postcss-loader
will use the previous source map given by other loaders and update it accordingly, if no previous loader is applied before postcss-loader
, the loader will generate a source map for you.
**webpack.config.js
**
You can set the ‘sourceMap: 'inline’` option to inline the source map within the CSS directly as an annotation comment.
**webpack.config.js
**
**webpack.config.js
**
**webpack.config.js
**
:warning:
postcss-preset-env
includesautoprefixer
, so adding it separately is not necessary if you already use the preset.
This loader cannot be used with CSS Modules out of the box due to the way css-loader
processes file imports. To make them work properly, either add the css-loader’s importLoaders
option.
**webpack.config.js
**
or use postcss-modules instead of css-loader
.
If you want to process styles written in JavaScript, use the postcss-js parser.
**webpack.config.js
**
As result you will be able to write styles in the following way
:warning: If you are using Babel you need to do the following in order for the setup to work
1. Add babel-plugin-add-module-exports to your configuration
- You need to have only one default export per style module
**webpack.config.js
**
Alexander Krasnoyarov <tbody>