additionalData and :export scss not working

[jannikbuscha]

Version

5.0.0-beta.7

Environment info

System:
    OS: Windows 10 10.0.19043
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
  Binaries:
    Node: 16.12.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.40)
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.2
    @vue/babel-plugin-jsx:  1.1.1
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  5.0.0-beta.7
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  5.0.0-beta.7
    @vue/cli-plugin-babel: ~5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-eslint: ~5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-router: ~5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-typescript: ~5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-plugin-vuex:  5.0.0-beta.7
    @vue/cli-service: ~5.0.0-beta.7 => 5.0.0-beta.7
    @vue/cli-shared-utils:  5.0.0-beta.7
    @vue/compiler-core:  3.2.20
    @vue/compiler-dom:  3.2.20
    @vue/compiler-sfc: ^3.2.6 => 3.2.20
    @vue/compiler-ssr:  3.2.20
    @vue/component-compiler-utils:  3.3.0
    @vue/devtools-api:  6.0.0-beta.19
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/reactivity:  3.2.20
    @vue/ref-transform:  3.2.20
    @vue/runtime-core:  3.2.20
    @vue/runtime-dom:  3.2.20
    @vue/server-renderer:  3.2.20
    @vue/shared:  3.2.20
    @vue/web-component-wrapper:  1.3.0
    eslint-plugin-vue: ^7.2.0 => 7.20.0
    typescript: ~4.1.5 => 4.1.6
    vue: ^3.2.6 => 3.2.20
    vue-class-component: ^8.0.0-0 => 8.0.0-rc.1
    vue-eslint-parser:  7.11.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  16.8.2 (15.9.8)
    vue-remix-icons: ^1.1.1 => 1.1.1
    vue-router: ^4.0.3 => 4.0.12
    vue-style-loader:  4.1.3
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

Create a Vue project with Typescript and a vue.config.js that looks like this:

module.exports = {
  transpileDependencies: true,
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/scss/style.scss";`,
      },
    },
  },
};

What is expected?

Loading my style.scss

What is actually happening?

It does not load my style.scss

---

The only way to load my style.scss file is by importing it into main.ts. Also the :export function in my scss file does not work. When I try to load something from :export I get back undefined.

[jannikbuscha]

Some screenshots:

[695648896]

Facing the same issue. Any update on this.

[jannikbuscha]

Facing the same issue. Any update on this.

in nuxt 3 which runs with vue 3 everything works strangely, but I have not dealt with the problem further.

[695648896]

see vue-cli-css-modules i resolve it by change my scss filename end with .module.(css|less|sass|scss|styl) and you can change the vueconfigjs like this: // vue.config.js module.exports = { css: { requireModuleExtension: false } }

[695648896]

see vue-cli-css-modules i resolve it by change my scss filename end with .module.(css|less|sass|scss|styl) and you can change the vueconfigjs like this: // vue.config.js module.exports = { css: { requireModuleExtension: false } }

css.modules and requireModuleExtension is removed in vuecli5, and you can resolve it like this: To import CSS or other pre-processor files as CSS Modules in JavaScript, the filename should end with .module(s).(css|less|sass|scss|styl) or change config like this

module.exports=defineConfig({
 css: {
    loaderOptions: {
      css: {
        modules: true
      }
    }
  }
})

[mayako21126]

 css: {
        modules: {
          mode: 'icss'
        }
  }

css-loader

[fewbadboy]

Today, l was also meet this problem. the css-modules part solved my ploblem. The scss filename should end with .module(s).(css|less|sass|scss|styl), then you can import scss files as CSS Modules in JavaScript