将 Sass/Scss 全局加载到一个 Vue 项目中
Globally load Sass/Scss into a Vue Project
所以,当我使用Vue-cli时3.X我使用了类似于This Thread的方法来全局加载我的许多样式文件。
但是,我已经升级到 Vue-cli 4.X,从那以后,我就无法使用这个技术了。我刚收到这个错误:
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??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/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
on line 8 of src/styles/global.scss
from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>> color: $grey-700;
---------------^
基本上,主屏幕之外的任何东西(例如组件)都不会在我的“_variables.scss”中获取任何东西。 (即使我将它们全部导入一个文件并使用它)
有什么建议吗?
(快更新)
我正在使用 node-sass 并且我的配置看起来像这样;
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
`
}
}
}
};
好的,以前只是使用 "data:"
但是,从 Vue 4 开始,现在似乎必须是 "prependData:"
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/_variables.scss";`
}
}
}
}
改为additionalData
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "~@/styles/_variables.scss";`
}
}
}
}
所以,当我使用Vue-cli时3.X我使用了类似于This Thread的方法来全局加载我的许多样式文件。
但是,我已经升级到 Vue-cli 4.X,从那以后,我就无法使用这个技术了。我刚收到这个错误:
./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader/dist/cjs.js??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/App.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable: "$grey-700".
on line 8 of src/styles/global.scss
from line 12 of /Users/kieranparker/Desktop/Personal/Side Projects/Dev/landingpages/src/App.vue
>> color: $grey-700;
---------------^
基本上,主屏幕之外的任何东西(例如组件)都不会在我的“_variables.scss”中获取任何东西。 (即使我将它们全部导入一个文件并使用它)
有什么建议吗?
(快更新) 我正在使用 node-sass 并且我的配置看起来像这样;
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
`
}
}
}
};
好的,以前只是使用 "data:" 但是,从 Vue 4 开始,现在似乎必须是 "prependData:"
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/_variables.scss";`
}
}
}
}
改为additionalData
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `@import "~@/styles/_variables.scss";`
}
}
}
}