Why sass not compiling in Nuxt project
up vote
0
down vote
favorite
I am trying to use Sass in my project based on Nuxt but no luck, I followed the documentation which tell to install few packages and it will complie. but I get the following error
error in ./pages/index.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
body{
^
Invalid CSS after "body{": expected "}", was "{"
and my code is in index.vue
<style lang="sass">
body{
margin: 0;
links{
border-bottom: 2px solid red;
}
}
</style>
nuxt.js
asked Nov 8 at 11:06
Nofel
4581729
add a comment |
up vote
0
down vote
favorite
I am trying to use Sass in my project based on Nuxt but no luck, I followed the documentation which tell to install few packages and it will complie. but I get the following error
error in ./pages/index.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
body{
^
Invalid CSS after "body{": expected "}", was "{"
and my code is in index.vue
<style lang="sass">
body{
margin: 0;
links{
border-bottom: 2px solid red;
}
}
</style>
nuxt.js
asked Nov 8 at 11:06
Nofel
4581729
try lang="scss"
– Badgy
Nov 8 at 13:39
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to use Sass in my project based on Nuxt but no luck, I followed the documentation which tell to install few packages and it will complie. but I get the following error
error in ./pages/index.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
body{
^
Invalid CSS after "body{": expected "}", was "{"
and my code is in index.vue
<style lang="sass">
body{
margin: 0;
links{
border-bottom: 2px solid red;
}
}
</style>
nuxt.js
asked Nov 8 at 11:06
Nofel
4581729
I am trying to use Sass in my project based on Nuxt but no luck, I followed the documentation which tell to install few packages and it will complie. but I get the following error
error in ./pages/index.vue?vue&type=style&index=0&lang=sass&
Module build failed (from ./node_modules/sass-loader/lib/loader.js):
body{
^
Invalid CSS after "body{": expected "}", was "{"
and my code is in index.vue
<style lang="sass">
body{
margin: 0;
links{
border-bottom: 2px solid red;
}
}
</style>
nuxt.js
nuxt.js
asked Nov 8 at 11:06
Nofel
4581729
asked Nov 8 at 11:06
Nofel
4581729
asked Nov 8 at 11:06
Nofel
4581729
asked Nov 8 at 11:06
Nofel
4581729
asked Nov 8 at 11:06
Nofel
4581729
4581729
try lang="scss"
– Badgy
Nov 8 at 13:39
add a comment |
try lang="scss"
– Badgy
Nov 8 at 13:39
try lang="scss"
– Badgy
Nov 8 at 13:39
try lang="scss"
– Badgy
Nov 8 at 13:39
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
Here is some Info about Sass and Scss
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What you wrote is no valid Sass. If you change your lang="scss" then it will work and you still have the benefits of Scss.
TL;DR: lang="scss"
answered Nov 8 at 13:42
Badgy
865320
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Here is some Info about Sass and Scss
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What you wrote is no valid Sass. If you change your lang="scss" then it will work and you still have the benefits of Scss.
TL;DR: lang="scss"
answered Nov 8 at 13:42
Badgy
865320
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
add a comment |
up vote
1
down vote
accepted
Here is some Info about Sass and Scss
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What you wrote is no valid Sass. If you change your lang="scss" then it will work and you still have the benefits of Scss.
TL;DR: lang="scss"
answered Nov 8 at 13:42
Badgy
865320
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Here is some Info about Sass and Scss
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What you wrote is no valid Sass. If you change your lang="scss" then it will work and you still have the benefits of Scss.
TL;DR: lang="scss"
answered Nov 8 at 13:42
Badgy
865320
Here is some Info about Sass and Scss
There are two syntaxes available for Sass. The first, known as SCSS
(Sassy CSS) and used throughout this reference, is an extension of the
syntax of CSS. This means that every valid CSS stylesheet is a valid
SCSS file with the same meaning. This syntax is enhanced with the Sass
features described below. Files using this syntax have the .scss
extension.
The second and older syntax, known as the indented syntax (or
sometimes just “Sass”), provides a more concise way of writing CSS. It
uses indentation rather than brackets to indicate nesting of
selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
What you wrote is no valid Sass. If you change your lang="scss" then it will work and you still have the benefits of Scss.
TL;DR: lang="scss"
answered Nov 8 at 13:42
Badgy
865320
answered Nov 8 at 13:42
Badgy
865320
answered Nov 8 at 13:42
Badgy
865320
answered Nov 8 at 13:42
Badgy
865320
865320
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
add a comment |
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
Thank you so much. I spend hours google and here i was using wrong lang type.
– Nofel
Nov 8 at 14:05
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
@Nofel ah happy to hear that it helped i had the same problem some weeks ago
– Badgy
Nov 8 at 14:27
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53206496%2fwhy-sass-not-compiling-in-nuxt-project%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
try lang="scss"
– Badgy
Nov 8 at 13:39