vue/cli4升级sass-loader 9.0使用全局注入sass变量后样式消失（vue/cli4对sass-loader 9.0版本的支持问题）

[zxwk1998]

Version

4.4.6

Reproduction link

https://github.com/chuzhixin/vue-admin-beautiful

Environment info

System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.4.0 - D:\Development\nodejs\node.EXE
    Yarn: 1.22.1 - D:\Development\nodejs\yarn.CMD
    npm: 6.14.5 - D:\Development\nodejs\npm.CMD
  Browsers:
    Edge: 44.19041.1.0
  npmPackages:
    @fortawesome/vue-fontawesome:  0.1.10
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.4.6
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.4.6
    @vue/cli-plugin-babel: ^4.4.6 => 4.4.6
    @vue/cli-plugin-eslint: ^4.4.6 => 4.4.6
    @vue/cli-plugin-router: ^4.4.6 => 4.4.6
    @vue/cli-plugin-vuex: ^4.4.6 => 4.4.6
    @vue/cli-service: ^4.4.6 => 4.4.6
    @vue/cli-shared-utils:  4.4.6
    @vue/component-compiler-utils:  3.1.2
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    babel-helper-vue-jsx-merge-props:  2.0.3
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    vue: ^2.6.11 => 2.6.11
    vue-cli-webpack:  1.0.0
    vue-echarts: ^5.0.0-beta.0 => 5.0.0-beta.0
    vue-eslint-parser:  7.1.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.3
    vue-qart: ^2.2.0 => 2.2.0
    vue-router: ^3.3.4 => 3.3.4
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuedraggable: ^2.23.2 => 2.23.2
    vuex: ^3.5.1 => 3.5.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

将sass-loader升级至9.0，安照sass-loader9.0文档将8.0 prependData选项修改为additionalData，运行成功但样式全部失效

What is expected?

希望vue/cli文档跟进sass-loader 9.0支持

What is actually happening?

vue/cli文档暂不支持sass-loader 9.0

[emkis]

this problem just happened to me right now, my OS is elementary OS. but is just an update from node-sass

[shaonialife]

我刚升级了我的 sass-loader 和 sass, 只需要把 prependData 改成 additionalData 就能正常运行
我也clone了你的项目, 修改成这样之后也能正常跑起来

[zxwk1998]

我刚升级了我的 sass-loader 和 sass, 只需要把 prependData 改成 additionalData 就能正常运行
我也clone了你的项目, 修改成这样之后也能正常跑起来

我试一下 感谢

[zxwk1998]

感谢老哥，帮了我大忙，已经在框架首页加上了感谢信息，以后有任何需要都可以联系我。
https://chu1204505056.gitee.io/vue-admin-beautiful/#/index

[shaonialife]

@chuzhixin 不客气

[jeneser]

additionalData: `@import "~@/variables.sass"`

@sodatea 这种方式用起来是没问题的 #5656 ，这里有个 demo 可以直接验证。@chuzhixin 你项目里这样用起来有问题是因为重复导入了 variables.sass, 如 zx-layouts/SideBar/index.vue 文件。

我认为这本身和 additionalData 配置无关，只是用法上的问题或者为了兼容项目。

sass-loader v9 的发布的确对配置项（prependData）做了调整 发布日志。prependData 配置项改成了 additionalData，不过，字符串的使用方式基本没有发生变化， function 模式下新版本透传了 content 过去，提供了更加灵活的处理 loader data 的方式，但本质上底层没有发生太大变化。代码对比：v8.x / v9.x。

additionalData: (content, loaderContext) => { ... }

这种方式用来处理重复导入本身没有问题，但我觉得这不应该是被推荐的做法。

[zxwk1998]

additionalData: `@import "~@/variables.sass"`

@sodatea 这种方式用起来是没问题的 #5656 ，这里有个 demo 可以直接验证。@chuzhixin 你项目里这样用起来有问题是因为重复导入了 variables.sass, 如 zx-layouts/SideBar/index.vue 文件。

我认为这本身和 additionalData 配置无关，只是用法上的问题或者为了兼容项目。

sass-loader v9 的发布的确对配置项（prependData）做了调整 发布日志。prependData 配置项改成了 additionalData，不过，字符串的使用方式基本没有发生变化， function 模式下新版本透传了 content 过去，提供了更加灵活的处理 loader data 的方式，但本质上底层没有发生太大变化。代码对比：v8.x / v9.x。

additionalData: (content, loaderContext) => { ... }

这种方式用来处理重复导入本身没有问题，但我觉得这不应该是被推荐的做法。

感谢大佬解惑，我去试下你说的方案
我明白了因为我用到了sass的:export的变量导出在js引入了一次，导致了我的项目必须处理重复导入