@@ -89,6 +89,8 @@ Here are some features you should know about:
89
89
90
90
## Integration for Sapper
91
91
92
+ <small >\* As of 2021-Apr-06, these instructions will now work without a FOUC!</small >
93
+
92
94
1 . Install the following packages as dev dependencies
93
95
- With yarn
94
96
``` sh
@@ -113,36 +115,47 @@ Here are some features you should know about:
113
115
114
116
// ...
115
117
116
- // At the client svelte options change emitCss to true and css to false
117
- svelte({
118
- compilerOptions: {
119
- dev,
120
- hydratable: true,
121
- css: false
122
- },
123
- emitCss: true
124
- }),
125
-
126
- // Right after that plugin, paste the following.
127
- // Once in the "client:" section, and again in the "server:" section.
128
- postcss({
129
- extensions: [ '.scss', '.sass'] ,
130
- extract: false,
131
- minimize: true,
132
- use: [
133
- [ 'sass', {
134
- includePaths: [
135
- './src/theme',
136
- './node_modules'
137
- ]
138
- }]
139
- ]
140
- }),
141
- // NOT in the "serviceworker:" section.
118
+ // Insert the following right before the "export default {" line:
119
+ const postcssOptions = (extract) => ({
120
+ extensions: [ '.scss'] ,
121
+ extract: extract ? 'smui.css' : false,
122
+ minimize: true,
123
+ use: [
124
+ [
125
+ 'sass',
126
+ {
127
+ includePaths: [ './src/theme', './node_modules'] ,
128
+ },
129
+ ] ,
130
+ ] ,
131
+ });
132
+
133
+ // Right after the "svelte" plugin in the "client:" section, paste the following plugin.
134
+ postcss(postcssOptions(true)),
135
+
136
+ // Right after the "svelte" plugin in the "server:" section, paste the following plugin.
137
+ postcss(postcssOptions(false)),
138
+
139
+ // Don't touch the "serviceworker:" section.
142
140
// ...
143
141
```
144
142
145
- 4. Install a SMUI package.
143
+ 4. In the `template.html` file, in the `<head>` section right after `%sapper.base%`, paste the following:
144
+
145
+ ```
146
+ <!-- SMUI Styles -->
147
+ <link rel =" stylesheet " href =" client/smui.css " >
148
+ ```
149
+
150
+ 5. Install a SMUI package, and include it from your Svelte files like this:
151
+
152
+ ```html
153
+ <Button on:click={() => alert('Clicked!')}>Click Me!</Button>
154
+
155
+ <script>
156
+ import Button from '@smui/button';
157
+ </script>
158
+ ```
146
159
147
160
# Components
148
161
0 commit comments