Vue css modules?

Question

webpack

What I read on the topic
https://cli.vuejs.org/guide/css.html#css-modules
https://vue-loader.vuejs.org/guide/css-modules.htm...
https://github .com/zhouwenbin/css-modules-vue-demo...
https://habr.com/ru/company/constanta/blog/428800/
https://habr.com/ru/post/335244/
https:/ /github.com/css-modules/css-modules/pull/65
Tried to import styles outside the style block component as in one of the git examples above.

import stylesss     from '[email protected]/assets/public/scss/public.scss';

What got the error

ERROR in ./src/components/public/layouts/basic.vue?vue&type=script&lang=js& (./node_modules/source-map-
loader!./node_modules/vue-loader/lib??vue-loader-options!./src/components/public/layouts/basic.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve 'style' in '/var/www/test/src/components/public/layouts'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'style-loader' instead of 'style',
                 see https://webpack.js.org/migrate/3/#automatic-loader-module-name-extension-removed

Lots of React examples, but 0 for Vue.
But what about Vue.js and its scoped styles?
What I do is to import the main styles in the layout component, the styles should be rummaged around on all child computers

<style lang="scss" module type="text/scss">
    @import '[email protected]/assets/public/scss/public.scss';
// all other imports
</style>

Everything is ok, it seems that everything that is needed has been shared, here is an example

app: "src-components-public-layouts-basic__app--1Df-Y"

Here are the configs if anything

{
        test: /\.css$/,
        use:  [
          'vue-style-loader',
          'style-loader',
          {
            loader:  'css-loader',
            options: {
              modules:        true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
              sourceMap:      true,
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        use:  [
          {
            loader: 'style-loader',
          },
          {
            loader:  'css-loader',
            options: {
              modules:        true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
              sourceMap:      true,
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },

However, this is a layout, that is, we look at the main component from which everything comes
from App.vue

<style lang="scss" module type="text/scss">
    @import '[email protected]/fontawesome-free/css/all.css';
    @import '[email protected]/assets/common/scss/common.scss';
</style>

there are also main styles, in common.scss

@import '~bootstrap/scss/bootstrap';
@import 'variables';
@import 'globals';
@import 'helpers';
@import 'override';
...

check in App.vue for content

.test3{
  display: block;
}

imported from globals.scss inside common.scc

mounted () {
      console.log(this.$style);
      console.log(this.$style.test3);
    },

Cool, everything is there
test3: "src-App__test3333333333333--2qUvj"
. What about libraries?
console.log(this.$style['col-md-12']);
There is also.
It's written in the docs

Modules as an alternative for simulated scoped CSS

It is necessary to update this.$styles of child components with styles from the parent, if those are not scoped.
My thoughts on how to solve this:
As an option, pass in props, however this is too expensive.
It is possible to somehow bind, again, it will be necessary to merge, conctat () styles to do when creating a child component. For example, through data or mixins.
Another option is to access parent styles via $parentComponent, which is also not very good.
You can use the package but it is not supported
So maybe the question is how to share specific styles globally?
How to combine global with local?
What did I miss?

Answer 1

1 - all mixins are scoped by default, regardless of whether they are specified as scoped or not
2 - import of global styles is now only via import()

import stylesss from '@/assets/common/scss/common.scss';

Because all the styles that go in the module style block are scoped by default!
3 - styles can also be passed via prop
4 - mixins can be used , a plugin example of common scss like BS 4 into a global mixin. Local mixins are those that are passed to the mixin and those that are in the css style block of the component. The plugin is working, tested, there is a fork with fixes. You can make a simpler version yourself, initially I made a global mixin for css and there I did the import of the main styles, which I actually needed. The plugin allows you to make it a little more convenient, details in the description.
The plugin cannot be used twice, otherwise it will overwrite the previous one. This can be improved by forking. Or pass styles as props, vuex state, or cram everything into one super minified and obfuscated file, make the mentioned imports in each component.
Everything above solves the problem of collisions and the curve of loading styles when the order is different, and also greatly minifies the styles.