You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
39
+
test:/node_modules\/svelte\/.*\.mjs$/,
40
+
resolve: {
41
+
fullySpecified:false
43
42
}
44
-
...
45
-
]
46
-
}
47
-
...
43
+
}
44
+
...
45
+
]
46
+
}
47
+
...
48
48
```
49
49
50
50
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
64
64
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.
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')
93
92
}
94
-
]
95
-
},
96
-
...
97
-
]
98
-
},
99
-
...
100
-
plugins: [
101
-
newMiniCssExtractPlugin('styles.css'),
93
+
}
94
+
]
95
+
},
102
96
...
103
97
]
98
+
},
99
+
...
100
+
plugins: [
101
+
newMiniCssExtractPlugin('styles.css'),
104
102
...
103
+
]
104
+
...
105
105
```
106
106
107
107
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`
135
135
136
136
```javascript
137
137
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
0 commit comments