DEV Community

namdo
namdo

Posted on • Updated on

hello world [svelte-boilerplate; smelte]

#svelte #svelteboilerplate #smelte #helloworld 
#svelte, #svelte-boilerplate, #smelte, #webpack, #tailwindcss
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
  • Upgrade to lastest version of postcss-loader on package.json file 
"postcss-loader": "^3.0.0", => "postcss-loader": "^4.0.4",
Enter fullscreen mode Exit fullscreen mode
  • Installing packages 
>_ cd hello-world && yarn install
Enter fullscreen mode Exit fullscreen mode
  • Installing smelte, postcss, postcss-import, postcss-nested 
>_ yarn add smelte postcss postcss-import postcss-nested
Enter fullscreen mode Exit fullscreen mode
  • Update postcss.config.js 
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-nested')
  ]
}
Enter fullscreen mode Exit fullscreen mode
  • Import tailwind css into Assets/css/global.css 
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// ...
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 { TextField } from "smelte";
</script>
Enter fullscreen mode Exit fullscreen mode 
<style src="./style.scss">
</style>
Enter fullscreen mode Exit fullscreen mode 
<Layout class="layout">
  <div class="container max-w-full">
    <div class="w-auto p-2">
      <TextField textarea label="Hello World" rows="3" outlined />
    </div>
  </div>
</Layout>
Enter fullscreen mode Exit fullscreen mode

Yeah !!!
Let's enjoy.

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

Top comments (0)

Read next

bnl profile image

Use CSS Variables to style react components on demand

Ben -

ssukhpinder profile image

Day 26 of 30-Day .NET Challenge: Loop Unrolling

Sukhpinder Singh -

bladearya profile image

Implementing Redux in Next.js (App Router): A Comprehensive Guide

Amit Kumar Rout -

r4nd3l profile image

Front-end specialisations: Accessibility

Matt Miller -