Level 28
Is it a manual install or with a starter kit? I mean inertia.
Sep 14, 2021
14
Level 10
Using SCSS with Jetstream Inertia
I'm sort of stumped trying to figure out how to use <style lang="scss"> in my Vue components. I'm working in Laravel 8 Jetstream Inertia and followed the instructions at https://vue-loader.vuejs.org/guide/pre-processors.html#sass. But when I run npm run dev it throws an ugly error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "{".
SFC
<template> ... </template>
<script> ... </script>
<style lang="scss">
$color-green: #29a634;
body { background-color: $color-green; }
</style>
webpack.config.js
const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
use: ['vue-style-loader', 'css-loader', 'sass-loader']
}
]
},
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};
npm ls
├── @inertiajs/[email protected]
├── @inertiajs/[email protected]
├── @inertiajs/[email protected]
├── @tailwindcss/[email protected]
├── @tailwindcss/[email protected]
├── @vue/[email protected]
├── @vueform/[email protected]
├── @vueform/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Any advice would be greatly appreciated!
Level 10
@shaungbhone Apologies, Jetstream is the starter!
1 like
Level 28
@libertie no apologies use this package https://github.com/nascent-africa/jetstrap
Level 10
@shaungbhone This looks cool, but I am using Tailwind in my project.
Level 28
@libertie You make me confused! -_- with sass and tailwind in your project?
Level 10
@shaungbhone I did not realize that this was highly unusual!
1 like
Level 28
@libertie Use jetstrap package and install tailwind. I think that's easy. Just my opinion.
1 like
Level 10
@shaungbhone Thanks! I will try this for another project. In this case, a suggestion from @frankielee ended up solving the issue.
2 likes
Level 29
https://blog.logrocket.com/the-definitive-guide-to-scss/
You can't simply declare the SCSS like that, browser doesn't understand that. That's why we have the compiler to compile it into CSS.
Level 10
@frankielee In this case, the SCSS is supposed to be compiled by Webpack as part of a Vue single-file-component. It should work, as detailed by https://vue-loader.vuejs.org/guide/pre-processors.html. Please correct me if I am misunderstanding.
Level 29
I have tested at my end, using fresh installation Laravel and jetstream + inertia
All you need to do is executing the below command, rerun the command npm run dev.
npm install sass-loader sass webpack --save-dev
https://webpack.js.org/loaders/sass-loader/
Remove the custom config rules you added for SASS/SCSS. Webpacker 6 will provide the appropriate CSS rules for you
2 likes
Level 10
@frankielee Thanks! I had previously seen that Stack Overflow comment, but was confused by the reference to "Webpacker 6" (which is for Rails, not PHP). Turns out that removing the rules I copies from the vue-loader guide did the trick. How strange!
For anyone coming along after me, removing the rules didn't immediately resolve the issue. I also installed [email protected] and restarted npm run watch a few times :)
Level 29
@libertie Actually I don't recommend people to do this. Since you are using Inertia which is a Single Page Application. Which normally only refresh the content, not the entire page, so the scoped style wouldn't affect the whole page.
Level 10
@frankielee Good point. The body styling above was just an example. My actual SCSS is specific to the component markup.
Please or to participate in this conversation.