Vue Config won't accept independent loaderOptions for both `scss` and `sass`. #4116

cadriel · 2019-06-07T00:01:34Z

Version

3.8.2

Reproduction link

https://github.com/cadriel/vue-cli-sass-scss-issue

Environment info

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.15.3 - /usr/local/var/nodenv/versions/10.15.3/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/var/nodenv/versions/10.15.3/bin/npm
  Browsers:
    Chrome: 74.0.3729.169
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.8.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.8.0
    @vue/cli-plugin-babel: ^3.8.0 => 3.8.0
    @vue/cli-plugin-eslint: ^3.8.0 => 3.8.0
    @vue/cli-service: ^3.8.0 => 3.8.0
    @vue/cli-shared-utils:  3.8.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.2
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.0
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.5.5

Steps to reproduce

$ git clone git@github.com:cadriel/vue-cli-sass-scss-issue.git
$ cd vue-cli-sass-scss-issue
$ yarn install
$ yarn serve

# Note errors.
# To remove the errors, modify the vue.config.js files data line to;
# data: '@import "~@/sass/main.scss";'

What is expected?

You should be able to have both sass and scss styles in a project concurrently, along with the ability to define loaderConfig for each.

What is actually happening?

The project fails to compile because the vue config references a sass formatted file - yet the HelloWorld component has scss styles.

Because the loaderConfig applies to both scss and sass an error is thrown.

A solution might be to add distinct loaderConfig for both scss and sass. You can see that these configurations are not distinct currently here;

vue-cli/packages/@vue/cli-service/lib/config/css.js

Line 168 in 1ff22d2

    
           createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.sass))

This is primarily an issue when you're depending on external projects that say use sass formatted styles, but your own project uses scss. I'm looking at you Vuetify 2.0. :)

The text was updated successfully, but these errors were encountered:

cadriel · 2019-06-07T00:15:37Z

I imagine changing line above to;

createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.scss))

might be a viable solution?

KaelWD · 2019-07-11T01:18:59Z

https://discordapp.com/channels/340160225338195969/361889521815519233/598165002691543040

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/_variables.scss";`,
      },
    },
  },
  chainWebpack: config => {
    ["vue-modules", "vue", "normal-modules", "normal"].forEach((match) => {
      config.module.rule('sass').oneOf(match).use('sass-loader')
        .tap(opt => Object.assign(opt, { data: `@import '~@/sass/_variables.scss'` }))
    })
  }
}

rafaelmaiach · 2019-07-11T01:50:37Z

Hi @KaelWD, I implemented this chainWebpack config changing rule('sass') for rule('scss') and importing my main.scss at the end and it worked with my Vuetify 2 app.
In this case, I created a color.scss file and added it to the css loader options and it worked.

This problem with scss/sass was because of using scss and importing a sass inside of it? (in my main.scss).

I'd like to get a better understanding of this solution.

Thank you!

KaelWD · 2019-07-13T05:29:28Z

Invalid in .scss files:

@import "~@/sass/_variables.scss" // Error: missing semicolon

Invalid in .sass files:

@import "~@/sass/_variables.scss"; // Error: unexpected ;

closes vuejs#4116

closes #4116

vkaracic · 2019-08-18T07:52:53Z

@sodatea this still happens for me on 4.0.0-beta.3 release.

haoqunjiang · 2019-08-21T09:21:44Z

@vkaracic In 4.0.0-beta.3 we have added a scss option, that means, you can configure them separately:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/sass/_variables.sass"`,
      },
      scss: {
        data: `@import "~@/sass/_variables.scss";`,
      }
    }
  }
}

closes #4116 (cherry picked from commit 930b459)

haoqunjiang · 2019-08-21T16:19:39Z

This feature has also been landed in v3 with today's release of v3.11.0

FossPrime · 2019-08-22T14:31:21Z

Make sure to update the @vue/cli-service

invalid options in vue.config.js: child "css" fails because [child "loaderOptions" fails because ["scss" is not allowed]]

haoqunjiang · 2019-08-22T14:36:53Z

@rayfoss Have you updated the @vue/cli-service package in your project?

kdamiani · 2019-09-06T12:43:10Z

i got the same error "Semicolons arent allowed in the indented syntax"
i have:

vue/cli-service (3.11.0)
vuetify (2.0.0)
sass (1.17.4)
vue-cli-plugin-vuetify (0.6.3)
vuetify-loader (1.2.2

up to date..

My vue scss files import config:

let vueConfig = {
  css: {
    loaderOptions: {
      scss: {
        data: `
          @import "src/assets/styles/variables.scss";
          @import "src/assets/styles/grid.scss";
          @import "src/assets/styles/plugins/animated.scss";
        `,
      }
    }
  },
  filenameHashing: false,
};

any one know my problem and have maybe a solution for me?
thanks.

FossPrime · 2019-09-06T13:17:35Z

@kdamiani

My solution was to update @vue/cli-service to 3.11.0 and modify the vue loader config

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"`
      },
      // pass options to sass-loader
      scss: {
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  },

kdamiani · 2019-09-06T14:02:32Z

@rayfoss - thanks for your fast answer!
i adjusted my configuration but the error is still there .. :-/

this is my full vue loader config:

let vueConfig = {
  css: {
    loaderOptions: {
      scss: {
        data: `
          @import "src/assets/styles/_variables.scss";
          @import "src/assets/styles/_mixins.scss";
          @import "src/assets/styles/_media-queries.scss";
          @import "src/assets/styles/_font.scss";
          @import "src/assets/styles/_icon-font.scss";
          @import "src/assets/styles/_basic.scss";
          @import "src/assets/styles/_grid.scss";
          @import "src/assets/styles/_helper-classes.scss";
          
          @import "src/assets/styles/plugins/_animated.scss";
         
          @import "src/assets/styles/vuetify/_v-btn.scss";
          @import "src/assets/styles/vuetify/_form-elements.scss";
          @import "src/assets/styles/vuetify/_pagination.scss";
          @import "src/assets/styles/vuetify/_v-dialog.scss";
          @import "src/assets/styles/vuetify/_v-list.scss";
          @import "src/assets/styles/vuetify/_v-tabs.scss";
        `,
      }
    }
  },
  filenameHashing: false,
  transpileDependencies: ["vue2-google-maps", "yallist", "lru-cache"]
};

The filenames have the same names "_variables.scss ... "

edit: i dont have sass files.. only scss

FossPrime · 2019-09-06T14:11:50Z

@kdamiani is it possible that one of your modules is using sass? My @import "@/styles/_variables.sass" is an empty file because vuetify uses sass and needs it.

kdamiani · 2019-09-06T14:18:54Z

@rayfoss i have sass installed.. vers 1.17.4 u mean this?
inside my components i use <style lang="scss">

my _variables.scss is not an empty file..
i seen.. i get this error above the error "semicolons arent allowed..."

error  in ./node_modules/vuetify/src/components/VTooltip/VTooltip.sass
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

after this i get the error message:

@import ./_variables
Semicolons aren't allowed in the indented syntax.
  ╷
@import "src/assets/styles/_variables.scss";

std in 2:54  root stylesheet in ./node_modules/vuetify/src/components/VTooltip/VTooltip.sass (line 2, column 54)

maybe this helps?

kdamiani · 2019-09-06T14:46:51Z

@rayfoss damn.. yes..
You're right... my mistake. I have now included an empty sass file - works! Thank you!

Chris2011 · 2019-09-13T13:11:00Z

Hah? So I need to add an empty sass file into the assets and add them to my conf file? I didn't have to do this before. I used node-sass, now I'm using sass and I got this error too:

// Imports
                           ^
      Semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import '@/assets/base.scss';
  │                             ^
  ╵
  stdin 1:29  root stylesheet
      in C:\Projekte\myproject\node_modules\vuetify\src\components\VAlert\VAlert.sass (line 1, column 29)

camarvito · 2020-10-21T14:08:08Z

@kdamiani

My solution was to update @vue/cli-service to 3.11.0 and modify the vue loader config

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.sass"`
      },
      // pass options to sass-loader
      scss: {
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss";`
      }
    }
  },

Works for me, thanks

FossPrime · 2020-11-18T23:36:49Z

Note, because of the way scoped loaders work in Vue 2... you CANNOT USE @use and expect variables to work normally... wait till Vue 3 for that or scope with randomized ID's.

Currently, prepended @use variables are not reachable by scoped component styles... which means you have to use @import in prepended sass data, which prevents you from using @use anywhere.

LinusBorg added the enhancement label Jun 8, 2019

KaelWD mentioned this issue Jul 11, 2019

[Bug Report] Vuetify not working with .scss file vuetifyjs/vuetify#7795

Closed

haoqunjiang added the intend to implement The team has the intention to implement this feature at some point. Contribution is also welcome. label Jul 13, 2019

This was referenced Jul 24, 2019

[Feature Request] [VTabsSlider] Add prop to override default tabs-slider-height vuetifyjs/vuetify#7683

Closed

[Bug Report] Unable to utilize SASS variables - breaks build and testing processes vuetifyjs/vuetify#7977

Closed

haoqunjiang added a commit to haoqunjiang/vue-cli that referenced this issue Jul 31, 2019

feat: allow configuring scss options separately from sass

4408211

closes vuejs#4116

haoqunjiang mentioned this issue Jul 31, 2019

feat: allow configuring scss options separately from sass #4386

Merged

haoqunjiang closed this as completed in #4386 Aug 2, 2019

haoqunjiang added a commit that referenced this issue Aug 2, 2019

feat: allow configuring scss options separately from sass (#4386)

930b459

closes #4116

KaelWD mentioned this issue Aug 8, 2019

[Bug Report] Conflict with global SCSS in vue.config vuetifyjs/vuetify-loader#75

Closed

haoqunjiang added a commit that referenced this issue Aug 21, 2019

feat: allow configuring scss options separately from sass (#4386)

96ab7ae

closes #4116 (cherry picked from commit 930b459)

Chris2011 mentioned this issue Oct 1, 2019

Sass-loader 8.0.0 not working with Vue-cli 3 #4526

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Vue Config won't accept independent loaderOptions for both `scss` and `sass`. #4116

Vue Config won't accept independent loaderOptions for both `scss` and `sass`. #4116

cadriel commented Jun 7, 2019

cadriel commented Jun 7, 2019

KaelWD commented Jul 11, 2019

rafaelmaiach commented Jul 11, 2019

KaelWD commented Jul 13, 2019

vkaracic commented Aug 18, 2019

haoqunjiang commented Aug 21, 2019

haoqunjiang commented Aug 21, 2019

FossPrime commented Aug 22, 2019 •

edited

Loading

haoqunjiang commented Aug 22, 2019

kdamiani commented Sep 6, 2019

FossPrime commented Sep 6, 2019

kdamiani commented Sep 6, 2019 •

edited

Loading

FossPrime commented Sep 6, 2019 •

edited

Loading

kdamiani commented Sep 6, 2019

kdamiani commented Sep 6, 2019

Chris2011 commented Sep 13, 2019

camarvito commented Oct 21, 2020

FossPrime commented Nov 18, 2020 •

edited

Loading

Vue Config won't accept independent loaderOptions for both scss and sass. #4116

Vue Config won't accept independent loaderOptions for both scss and sass. #4116

Comments

cadriel commented Jun 7, 2019

Version

Reproduction link

Environment info

Steps to reproduce

What is expected?

What is actually happening?

cadriel commented Jun 7, 2019

KaelWD commented Jul 11, 2019

rafaelmaiach commented Jul 11, 2019

KaelWD commented Jul 13, 2019

vkaracic commented Aug 18, 2019

haoqunjiang commented Aug 21, 2019

haoqunjiang commented Aug 21, 2019

FossPrime commented Aug 22, 2019 • edited Loading

haoqunjiang commented Aug 22, 2019

kdamiani commented Sep 6, 2019

FossPrime commented Sep 6, 2019

kdamiani commented Sep 6, 2019 • edited Loading

FossPrime commented Sep 6, 2019 • edited Loading

kdamiani commented Sep 6, 2019

kdamiani commented Sep 6, 2019

Chris2011 commented Sep 13, 2019

camarvito commented Oct 21, 2020

FossPrime commented Nov 18, 2020 • edited Loading

Vue Config won't accept independent loaderOptions for both `scss` and `sass`. #4116

Vue Config won't accept independent loaderOptions for both `scss` and `sass`. #4116

FossPrime commented Aug 22, 2019 •

edited

Loading

kdamiani commented Sep 6, 2019 •

edited

Loading

FossPrime commented Sep 6, 2019 •

edited

Loading

FossPrime commented Nov 18, 2020 •

edited

Loading