Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: fix mini-css-extract-plugin options #721

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
30 changes: 12 additions & 18 deletions docs/BUNDLERS_INTEGRATION.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
# Bundlers Integration

## Jump To

- [webpack](#webpack)
- [Rollup](#Rollup)
- [Svelte](#Svelte)
Expand All @@ -11,7 +12,7 @@ If you use Babel in your project, make sure to have a [config file for Babel](ht

## Bundlers

Please note, that `@babel/core` is a peer dependency of all loaders. Do not forget to add it to `devDependencies` list in your project.
Please note, that `@babel/core` is a peer dependency of all loaders. Do not forget to add it to `devDependencies` list in your project.

### webpack

Expand Down Expand Up @@ -54,9 +55,6 @@ Now add the following snippet in under `module.rules`:
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV !== 'production',
},
},
{
loader: 'css-loader',
Expand Down Expand Up @@ -139,12 +137,7 @@ module.exports = {
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV !== 'production',
},
},
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: { sourceMap: dev },
Expand Down Expand Up @@ -185,7 +178,7 @@ The loader accepts the following options:
- `cacheDirectory: string` (default: `'.linaria-cache'`):

Path to the directory where the loader will output the intermediate CSS files. You can pass a relative or absolute directory path. Make sure the directory is inside the working directory for things to work properly. **You should add this directory to `.gitignore` so you don't accidentally commit them.**

- `extension: string` (default: `'.linaria.css'`):

An extension of the intermediate CSS files.
Expand Down Expand Up @@ -256,32 +249,34 @@ export default {
};
```


If you are using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as well, ensure the linaria plugin is declared earlier in the `plugins` array than your babel plugin.
If you are using [@rollup/plugin-babel](https://github.com/rollup/plugins/tree/master/packages/babel) as well, ensure the linaria plugin is declared earlier in the `plugins` array than your babel plugin.

```js
import linaria from '@linaria/rollup';
import css from 'rollup-plugin-css-only';
import babel from "@rollup/plugin-babel";
import babel from '@rollup/plugin-babel';

export default {
/* rest of your config */
/* rest of your config */
plugins: [
linaria({
sourceMap: process.env.NODE_ENV !== 'production',
}),
css({
output: 'styles.css',
}),
babel({/**/}),
/* rest of your plugins */
babel({
/**/
}),
/* rest of your plugins */
],
};
```

### Svelte

#### Contents

- [Svelte with Rollup](#Rollup-1)
- [Svelte with Webpack](#Webpack-1)

Expand Down Expand Up @@ -362,4 +357,3 @@ module.exports = {
},
};
```