Vue-cli: Vue Config won't accept independent loaderOptions for both `scss` and `sass`.

[cadriel]

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 [email protected]: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;
https://github.com/vuejs/vue-cli/blob/1ff22d2a51bfd62f851a8baae2027ae5e18488ea/packages/%40vue/cli-service/lib/config/css.js#L168

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. :)

[cadriel]

I imagine changing line above to;

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

might be a viable solution?

[KaelWD]

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]

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]

Invalid in .scss files:

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

Invalid in .sass files:

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

[vkaracic]

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

[sodatea]

@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";`,
      }
    }
  }
}

[sodatea]

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

[rayfoss]

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]]

[sodatea]

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

[kdamiani]

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.

[rayfoss]

@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]

@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

[rayfoss]

@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.