sass引用全局变量报错

laiwoyaojubaoni commented 5 years ago

Version

3.5.5

Reproduction link

[System: OS: macOS 10.14.4 CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz Binaries: Node: 10.15.3 - /usr/local/bin/node Yarn: Not Found npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 73.0.3683.86 Firefox: Not Found Safari: 12.1 npmPackages: @ant-design/icons-vue: 1.0.1 @vue/babel-helper-vue-jsx-merge-props: 1.0.0-beta.3 @vue/babel-plugin-transform-vue-jsx: 1.0.0-beta.3 @vue/babel-preset-app: 3.5.5 @vue/babel-preset-jsx: 1.0.0-beta.3 @vue/babel-sugar-functional-vue: 1.0.0-beta.3 @vue/babel-sugar-inject-h: 1.0.0-beta.3 @vue/babel-sugar-v-model: 1.0.0-beta.3 @vue/babel-sugar-v-on: 1.0.0-beta.3 @vue/cli-overlay: 3.5.1 @vue/cli-plugin-babel: ^3.5.0 => 3.5.5 @vue/cli-plugin-e2e-cypress: ^3.5.0 => 3.5.1 @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1 @vue/cli-service: ^3.5.0 => 3.5.3 @vue/cli-shared-utils: 3.5.1 @vue/component-compiler-utils: 2.6.0 @vue/preload-webpack-plugin: 1.1.0 @vue/web-component-wrapper: 1.2.0 ant-design-vue: ^1.3.8 => 1.3.8 babel-helper-vue-jsx-merge-props: 2.0.3 eslint-plugin-vue: ^5.0.0 => 5.2.2 vue: ^2.6.6 => 2.6.10 vue-eslint-parser: 2.0.3 vue-hot-reload-api: 2.3.3 vue-loader: 15.7.0 vue-ref: 1.0.6 vue-router: ^3.0.1 => 3.0.3 vue-style-loader: 4.1.2 vue-template-compiler: ^2.5.21 => 2.6.10 vue-template-es2015-compiler: 1.9.1 vuex: ^3.0.1 => 3.1.0 npmGlobalPackages: @vue/cli: 3.5.5](System: OS: macOS 10.14.4 CPU: (4) x64 Intel(R) Core(TM) i5-5250U CPU @ 1.60GHz Binaries: Node: 10.15.3 - /usr/local/bin/node Yarn: Not Found npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 73.0.3683.86 Firefox: Not Found Safari: 12.1 npmPackages: @ant-design/icons-vue: 1.0.1 @vue/babel-helper-vue-jsx-merge-props: 1.0.0-beta.3 @vue/babel-plugin-transform-vue-jsx: 1.0.0-beta.3 @vue/babel-preset-app: 3.5.5 @vue/babel-preset-jsx: 1.0.0-beta.3 @vue/babel-sugar-functional-vue: 1.0.0-beta.3 @vue/babel-sugar-inject-h: 1.0.0-beta.3 @vue/babel-sugar-v-model: 1.0.0-beta.3 @vue/babel-sugar-v-on: 1.0.0-beta.3 @vue/cli-overlay: 3.5.1 @vue/cli-plugin-babel: ^3.5.0 => 3.5.5 @vue/cli-plugin-e2e-cypress: ^3.5.0 => 3.5.1 @vue/cli-plugin-eslint: ^3.5.0 => 3.5.1 @vue/cli-service: ^3.5.0 => 3.5.3 @vue/cli-shared-utils: 3.5.1 @vue/component-compiler-utils: 2.6.0 @vue/preload-webpack-plugin: 1.1.0 @vue/web-component-wrapper: 1.2.0 ant-design-vue: ^1.3.8 => 1.3.8 babel-helper-vue-jsx-merge-props: 2.0.3 eslint-plugin-vue: ^5.0.0 => 5.2.2 vue: ^2.6.6 => 2.6.10 vue-eslint-parser: 2.0.3 vue-hot-reload-api: 2.3.3 vue-loader: 15.7.0 vue-ref: 1.0.6 vue-router: ^3.0.1 => 3.0.3 vue-style-loader: 4.1.2 vue-template-compiler: ^2.5.21 => 2.6.10 vue-template-es2015-compiler: 1.9.1 vuex: ^3.0.1 => 3.1.0 npmGlobalPackages: @vue/cli: 3.5.5)

Environment info

Mac

Steps to reproduce

css: { loaderOptions: { less: { modifyVars: { // Ant }, javascriptEnabled: true }, sass: { data: @import "@/styles/variable.scss" } } }

3.5.5版本按照官方提供的sass全局变量配置 https://cli.vuejs.org/zh/guide/css.html#css-modules 在运行时报错：Module build failed (from ./node_modules/sass-loader/lib/loader.js) 但是3.4.1版本没有报错

What is expected?

能够引用全局变量

What is actually happening?

3.5.5版本按照官方提供的sass全局变量配置 https://cli.vuejs.org/zh/guide/css.html#css-modules 在运行时报错：Module build failed (from ./node_modules/sass-loader/lib/loader.js) 但是3.4.1版本没有报错

haoqunjiang commented 5 years ago

抱歉，中文文档没有及时更新，路径别名之前应当加上 ~，参见英文文档： https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

正确的引入方式是：

data: `@import "~@/variables.scss";`

a3246995 commented 5 years ago

我的也报错: https://segmentfault.com/q/1010000019750954 ,不是缩写问题

haoqunjiang commented 5 years ago

@a3246995

- data: `@import "./styles/variables.scss"`,
+ data: `@import "./styles/variables.scss";`,

漏了分号

a3246995 commented 5 years ago

好了,谢谢没想到这么严格...

TangXiaoDouL commented 5 years ago

我的按照官方的也不行 vue.config.js module.exports = { css: { loaderOptions: { sass: { data: @import "./src/assets/scss/style.scss";, } } } }

style.scss $color:#fff;

页面style .title{ position: fixed; left: 0; top: 0; width: 100%; height: 40px; background-color: cornflowerblue;

} .title p {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        color: $color;
    }

./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true&) 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? } at validate (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\dist\index.js:36:28)

win7 64位系统

XiangXiaolong007 commented 5 years ago

我的按照官方的也不行 vue.config.js module.exports = { css: { loaderOptions: { sass: { data: @import "./src/assets/scss/style.scss";, } } } }

style.scss $color:#fff;

页面style .title{ position: fixed; left: 0; top: 0; width: 100%; height: 40px; background-color: cornflowerblue;
} .title p {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        color: $color;
    }
./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true& (./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true&) 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? } at validate (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\dist\index.js:36:28)

win7 64位系统

我的也是报这个错，请问大佬有结论了没

TangXiaoDouL commented 5 years ago

我的按照官方的也不行 vue.config.js module.exports = { CSS：{ loaderOptions：{ SASS：{ 数据：@import "./src/assets/scss/style.scss";， } } } } style.scss $ color：#fff ; 页面样式 .title { position：fixed; 左：0; 顶部：0; 宽度：100％; 身高：40px; 背景颜色：cornflowerblue;
} .title p {
        width: 100%;
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 20px;
        color: $color;
    }
./src/components/header.vue?vue&type=style&index=0&lang=scss&scope=true&(./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/lib/ ！装载机/ stylePostLoader.js ./ node_modules / postcss装载机/ SRC ?? REF - 8- oneOf-1-2 ./ node_modules / SASS装载机/ DIST / cjs.js ?? REF！ - 8- oneOf- ！1-3 ./ node_modules /缓存加载器/ DIST / cjs.js ?? REF！ - 0-0 ./ node_modules / VUE装载机/ lib中?? VUE装载机选项./ SRC /组件/报头.vue？vue＆type = style＆index = 0＆lang = scss＆scope = true＆）模块构建失败（来自./node_modules/sass-loader/dist/cjs.js）：ValidationError ：无效的选项对象。Sass Loader已使用与API架构不匹配的选项对象进行初始化。

options has an unknown property 'data'. These properties are valid: object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? } at validate (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:49:11) at Object.loader (C:\Users\Administrator\Desktop\tang\node_modules\sass-loader\dist\index.js:36:28)

win7 64位系统
我的也是报这个错，请问大佬有结论了没

sass-loader语法改了： https://segmentfault.com/q/1010000020343645?_ea=18911585

shijiezhou1 commented 2 years ago

For the sass later than 10, please use this below

 css: {
        loaderOptions: {
            sass: {
                additionalData: `@import "@/styles/_variables.scss";`,
            },
        }
    }

vuejs / vue-cli