#svelte, #svelte-boilerplate, #smelte, #webpack, #tailwindcss
Let's do it.
- Initial project using svelte-boilerplate template
>_ git clone https://github.com/pankod/svelte-boilerplate.git hello-word
- Upgrade to lastest version of
postcss-loader
onpackage.json
file
"postcss-loader": "^3.0.0", => "postcss-loader": "^4.0.4",
- Installing packages
>_ cd hello-world && yarn install
- Installing smelte, postcss, postcss-import, postcss-nested
>_ yarn add smelte postcss postcss-import postcss-nested
- Update
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer'),
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested')
]
}
- Import tailwind css into
Assets/css/global.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
// ...
- 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 { TextField } from "smelte";
</script>
<style src="./style.scss">
</style>
<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>
Yeah !!!
Let's enjoy.
>_ yarn start:dev
Top comments (0)