#svelte, #svelte-boilerplate, #svelte-material-ui, #webpack
Let's do it.
- Initial project using svelte-boilerplate template
>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word
- Installing packages
>_ cd hello-world && yarn install
- Installing svelte-material-ui, sass-loader
>_ yarn add svelte-material-ui sass-loader
- Make default theme
>_ mkdir src/theme && touch src/theme/_smui-theme.scss
- Adding sass-loader into webpack
webpack.config.js
// ...
rules: [
// ...
{
test: /\.(sa|sc)ss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [
'./src/theme',
'./node_modules'
]
}
}
}
]
},
// ...
]
- Remove line
exclude: /node_modules/,
ofsvelte-loader
onwebpack.config.js
rules: [
{
test: /\.svelte$/,
/*exclude: /node_modules/,*/
use: {
loader: 'svelte-loader',
options: {
emitCss: true,
hotReload: true,
preprocess: require('svelte-preprocess')([
scss()
])
}
}
},
]
- Update
src/App/index.svelte
<script>
import Layout from '@Components/Layout';
import { Label } from '@smui/button';
</script>
<style lang="scss">
.container {
background-color: #000;
color: #fff;
display: flex;
flex-direction: column;
flex: 1 1 100%;
justify-content: flex-start;
align-items: center;
min-height: 100vh;
&__middle {
display: flex;
flex: 1 1 100%;
justify-content: center;
align-items: flex-start;
}
}
.message {
font-size: 3rem;
}
</style>
<Layout>
<div class="container">
<div class="container__middle">
<div class="message">
<Label>HELLO WORLD</Label>
</div>
</div>
</div>
</Layout>
Get ready for you !
Let's enjoy.
>_ yarn start:dev
Top comments (0)