DEV Community

namdo
namdo

Posted on • Updated on

hello world [svelte-boilerplate; svelte-material-ui]

#svelte, #svelte-boilerplate, #svelte-material-ui, #webpack
Enter fullscreen mode Exit fullscreen mode

Let's do it.

  • Initial project using svelte-boilerplate template
>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word
Enter fullscreen mode Exit fullscreen mode
  • Installing packages
>_ cd hello-world && yarn install
Enter fullscreen mode Exit fullscreen mode
  • Installing svelte-material-ui, sass-loader
>_ yarn add svelte-material-ui sass-loader
Enter fullscreen mode Exit fullscreen mode
  • Make default theme
>_ mkdir src/theme && touch src/theme/_smui-theme.scss
Enter fullscreen mode Exit fullscreen mode
  • 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'
                        ]
                    }
                }
            }
        ]
    },
    // ...
]
Enter fullscreen mode Exit fullscreen mode
  • Remove line exclude: /node_modules/, of svelte-loader on webpack.config.js
rules: [
    {
        test: /\.svelte$/,        
        /*exclude: /node_modules/,*/
        use: {
            loader: 'svelte-loader',
            options: {
                emitCss: true,
                hotReload: true,
                preprocess: require('svelte-preprocess')([
                    scss()
                ])
            }
        }
    },
]
Enter fullscreen mode Exit fullscreen mode
  • Update src/App/index.svelte
<script>
    import Layout from '@Components/Layout';
    import { Label } from '@smui/button';
</script>
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode
<Layout>
    <div class="container">
        <div class="container__middle">
            <div class="message">
                <Label>HELLO WORLD</Label>
            </div>
        </div>
    </div>
</Layout>
Enter fullscreen mode Exit fullscreen mode

Get ready for you !
Let's enjoy.

>_ yarn start:dev
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)