milad-alizadeh / vue-cli-plugin-scss-base Goto Github PK

View Code? Open in Web Editor NEW

21.0 21.0 4.0 25 KB

An opiniated Vue CLI plugin to include base SCSS files such as variables, mixins and reset

License: MIT License

JavaScript 5.81% CSS 92.71% Vue 1.48%

vue-cli-plugin-scss-base's People

Contributors

Stargazers

Watchers

Forkers

empitsu 971389117 thenutz kreo

vue-cli-plugin-scss-base's Issues

Failed to extend rule defined in utillities.scss

Hey, I coming again 😀.

The rule defined in utillities.scss(like .u-visually-hidden) failed to be extended in component scss.

<style lang="scss" module>
.item {
  .label {
    @extend .u-visually-hidden;
  }
}
</style>

The error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  }
           ^
      ".item .label" failed to @extend ".u-visually-hidden".
The selector ".u-visually-hidden" was not found.
Use "@extend .u-visually-hidden !optional" if the extend should be able to fail.
      in xxx.vue

But it can be used as inline class

<template>
    <!-- ok -->
    <div class="u-visually-hidden"></div>
<template>

Every Component includes all scss content when using css module.

My every component use css module:

<style lang="scss" module>
.foo {}
</style>

And used in template:

<template>
  <div :class="$style.foo"></div>
</template>

But I found in every style link, the all css rules in scss directory was included in single component css module.
component A style

component B style

Is the configure reason that import base.scss in every css module?

css: {
    loaderOptions: {
      sass: {
        data: '@import "@/scss/base.scss";',
      },
    },
  },

BUG: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

On this package list:

    "sass": "^1.19.0",
    "sass-loader": "^8.0.0",
    "storybook-addon-vue-info": "1.1.1",
    "storybook-vue-router": "1.0.3",
    "typescript": "~3.5.3",
    "vue-cli-plugin-atomic-design": "^0.3.3",
    "vue-cli-plugin-electron-builder": "^1.4.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-cli-plugin-scss-base": "0.2.2",
    "vue-template-compiler": "^2.6.10"

and this configuration

  css: {
    loaderOptions: {
      sass: {
        data: '@import "@/scss/settings.scss";'
      }
    }
  }

I've got error

 ERROR  Failed to compile with 2 errors                                                                                                                                                                        18:43:37

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'data'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }

To fix this I have to change the configuration to:

  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/scss/settings.scss";'
      }
    }
  }

milad-alizadeh / vue-cli-plugin-scss-base Goto Github PK

vue-cli-plugin-scss-base's People

Contributors

Stargazers

Watchers

Forkers

vue-cli-plugin-scss-base's Issues

Failed to extend rule defined in utillities.scss

Every Component includes all scss content when using css module.

BUG: ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent