Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SCSS: @use, @forward: Cannot use modules and access it's members #1666

Closed
Rolanddoda opened this issue Apr 17, 2020 · 2 comments
Closed

SCSS: @use, @forward: Cannot use modules and access it's members #1666

Rolanddoda opened this issue Apr 17, 2020 · 2 comments

Comments

@Rolanddoda
Copy link

Version

15.9.1

Reproduction link

https://github.com/Rolanddoda/scss-syntax-issue

Steps to reproduce

I have a _list.scss file:

@mixin heading-style {
  background: blue;
  color: white;
}

A main.scss file:

@forward "list";

And in App.vue

<style lang="scss">
@use "scss/main";

h1 {
  @include main.heading-style;
}
</style>

What is expected?

On h1 element should be applied the css of the heading-style mixin.

What is actually happening?

I am getting a syntax error:

./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "  @include main": expected "}", was ".heading-style;"
        on line 17 of C:\Users\rolan\Desktop Non OneDrive\Coding\Projects\scss-syntax-issue\src\App.vue
>>   @include main.heading-style;

   -----------^
@Rolanddoda Rolanddoda changed the title @use, @forward: Cannot use modules and access it's members SCSS: @use, @forward: Cannot use modules and access it's members Apr 17, 2020
@haoqunjiang
Copy link
Member

https://sass-lang.com/documentation/at-rules/use

Only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.

npm uninstall node-sass
npm install sass

@orionrush
Copy link

See node-sass issue 2886.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants