Skip to content

Commit d4b9e43

Browse files
committed
Actualize readme
Remove remainings of ExtractTextPlugin Move `css: false` to compilerOptions Remove externalDependencies, there's no such option anymore
1 parent dc0c783 commit d4b9e43

File tree

1 file changed

+24
-40
lines changed

1 file changed

+24
-40
lines changed

README.md

+24-40
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,20 @@ Additionally, if you're using multiple entrypoints, you may wish to change `new
112112

113113
Warning, in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of if it's included in your svelte components.
114114

115-
Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use `css: false`.
115+
Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use
116+
117+
```javascript
118+
...
119+
use: {
120+
loader: 'svelte-loader',
121+
options: {
122+
compilerOptions: {
123+
css: false
124+
}
125+
},
126+
},
127+
...
128+
```
116129

117130
### Source maps
118131

@@ -128,29 +141,24 @@ module.exports = {
128141
module: {
129142
rules: [
130143
...
131-
{
132-
test: /\.(html|svelte)$/,
133-
exclude: /node_modules/,
134-
use: {
135-
loader: 'svelte-loader',
136-
options: {
137-
emitCss: true,
138-
},
139-
},
140-
},
141144
{
142145
test: /\.css$/,
143-
use: ExtractTextPlugin.extract({
144-
fallback: 'style-loader',
145-
use: [{ loader: 'css-loader', options: { sourceMap: true } }],
146-
}),
146+
use: [
147+
prod ? MiniCssExtractPlugin.loader :'style-loader',
148+
{
149+
loader: 'css-loader',
150+
options: {
151+
sourceMap: true
152+
}
153+
}
154+
]
147155
},
148156
...
149157
]
150158
},
151159
...
152160
plugins: [
153-
new ExtractTextPlugin('styles.css'),
161+
new MiniCssExtractPlugin('styles.css'),
154162
...
155163
]
156164
...
@@ -247,30 +255,6 @@ module.exports = {
247255
}
248256
```
249257

250-
#### External Dependencies
251-
252-
If you rely on any external dependencies (files required in a preprocessor for example) you might want to watch these files for changes and re-run svelte compile.
253-
254-
Webpack allows [loader dependencies](https://webpack.js.org/contribute/writing-a-loader/#loader-dependencies) to trigger a recompile. svelte-loader exposes this API via `options.externalDependencies`.
255-
For example:
256-
257-
```js
258-
...
259-
const variables = path.resolve('./variables.js');
260-
...
261-
{
262-
test: /\.(html|svelte)$/,
263-
use: [
264-
{
265-
loader: 'svelte-loader',
266-
options: {
267-
externalDependencies: [variables]
268-
}
269-
}
270-
]
271-
}
272-
```
273-
274258
## License
275259

276260
MIT

0 commit comments

Comments
 (0)