Skip to content

Commit 1b4f0ef

Browse files
committed
Fix readme indentation
1 parent d4b9e43 commit 1b4f0ef

File tree

1 file changed

+81
-81
lines changed

1 file changed

+81
-81
lines changed

README.md

+81-81
Original file line numberDiff line numberDiff line change
@@ -17,34 +17,34 @@ npm install --save svelte svelte-loader
1717
Configure inside your `webpack.config.js`:
1818

1919
```javascript
20-
...
21-
resolve: {
22-
// see below for an explanation
23-
alias: {
24-
svelte: path.resolve('node_modules', 'svelte')
25-
},
26-
extensions: ['.mjs', '.js', '.svelte'],
27-
mainFields: ['svelte', 'browser', 'module', 'main']
20+
...
21+
resolve: {
22+
// see below for an explanation
23+
alias: {
24+
svelte: path.resolve('node_modules', 'svelte')
2825
},
29-
module: {
30-
rules: [
31-
...
32-
{
33-
test: /\.(html|svelte)$/,
34-
exclude: /node_modules/,
35-
use: 'svelte-loader'
36-
},
37-
{
38-
// required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
39-
test: /node_modules\/svelte\/.*\.mjs$/,
40-
resolve: {
41-
fullySpecified: false
42-
}
26+
extensions: ['.mjs', '.js', '.svelte'],
27+
mainFields: ['svelte', 'browser', 'module', 'main']
28+
},
29+
module: {
30+
rules: [
31+
...
32+
{
33+
test: /\.(html|svelte)$/,
34+
exclude: /node_modules/,
35+
use: 'svelte-loader'
36+
},
37+
{
38+
// required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
39+
test: /node_modules\/svelte\/.*\.mjs$/,
40+
resolve: {
41+
fullySpecified: false
4342
}
44-
...
45-
]
46-
}
47-
...
43+
}
44+
...
45+
]
46+
}
47+
...
4848
```
4949

5050
Check out the [example project](https://github.com/sveltejs/template-webpack).
@@ -64,44 +64,44 @@ If your Svelte components contain `<style>` tags, by default the compiler will a
6464
A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to the mix to output the css to a separate file.
6565

6666
```javascript
67-
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
68-
const mode = process.env.NODE_ENV || 'development';
69-
const prod = mode === 'production';
70-
...
71-
module: {
72-
rules: [
73-
...
74-
{
75-
test: /\.(html|svelte)$/,
76-
exclude: /node_modules/,
77-
use: {
78-
loader: 'svelte-loader',
79-
options: {
80-
emitCss: true,
81-
},
67+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
68+
const mode = process.env.NODE_ENV || 'development';
69+
const prod = mode === 'production';
70+
...
71+
module: {
72+
rules: [
73+
...
74+
{
75+
test: /\.(html|svelte)$/,
76+
exclude: /node_modules/,
77+
use: {
78+
loader: 'svelte-loader',
79+
options: {
80+
emitCss: true,
8281
},
8382
},
84-
{
85-
test: /\.css$/,
86-
use: [
87-
prod ? MiniCssExtractPlugin.loader :'style-loader',
88-
{
89-
loader: 'css-loader',
90-
options: {
91-
url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
92-
}
83+
},
84+
{
85+
test: /\.css$/,
86+
use: [
87+
prod ? MiniCssExtractPlugin.loader :'style-loader',
88+
{
89+
loader: 'css-loader',
90+
options: {
91+
url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
9392
}
94-
]
95-
},
96-
...
97-
]
98-
},
99-
...
100-
plugins: [
101-
new MiniCssExtractPlugin('styles.css'),
93+
}
94+
]
95+
},
10296
...
10397
]
98+
},
99+
...
100+
plugins: [
101+
new MiniCssExtractPlugin('styles.css'),
104102
...
103+
]
104+
...
105105
```
106106

107107
Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading.
@@ -135,33 +135,33 @@ To enable CSS source maps, you'll need to use `emitCss` and pass the `sourceMap`
135135

136136
```javascript
137137
module.exports = {
138-
...
139-
devtool: "source-map", // any "source-map"-like devtool is possible
140-
...
141-
module: {
142-
rules: [
143-
...
144-
{
145-
test: /\.css$/,
146-
use: [
147-
prod ? MiniCssExtractPlugin.loader :'style-loader',
148-
{
149-
loader: 'css-loader',
150-
options: {
151-
sourceMap: true
152-
}
138+
...
139+
devtool: "source-map", // any "source-map"-like devtool is possible
140+
...
141+
module: {
142+
rules: [
143+
...
144+
{
145+
test: /\.css$/,
146+
use: [
147+
prod ? MiniCssExtractPlugin.loader :'style-loader',
148+
{
149+
loader: 'css-loader',
150+
options: {
151+
sourceMap: true
153152
}
154-
]
155-
},
156-
...
157-
]
158-
},
159-
...
160-
plugins: [
161-
new MiniCssExtractPlugin('styles.css'),
153+
}
154+
]
155+
},
162156
...
163157
]
158+
},
159+
...
160+
plugins: [
161+
new MiniCssExtractPlugin('styles.css'),
164162
...
163+
]
164+
...
165165
};
166166
```
167167

0 commit comments

Comments
 (0)