我正在尝试将以下 SASS 变量导出到我的 Vue 项目中的 Javascript 中。_export.sass
:export
colorvariable: blue
othercolorvariable: red
我正在关注 this post 中的回复作为模板。但是,当我尝试在下面导入我的 sass 文件时...
About.vue
<script>
import styles from "@/styles/_export.sass";
export default {
name: "About",
data() {
return { styles };
}
};
</script>
我收到以下错误:
WAIT Compiling... 2:17:03 AM
98% after emitting CopyPlugin
ERROR Failed to compile with 1 errors 2:17:03 AM
error in ./src/styles/_export.sass
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after '...les/main.sass";': expected 1 selector or at-rule, was "export: {"
on line 1 of /Users/MatthewBell/GitHub/pollify/client/src/styles/_export.sass
>> @import "@/styles/main.sass";
-----------------------------^
@ ./src/styles/_export.sass 4:14-227 14:3-18:5 15:22-235
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/About.vue?vue&type=script&lang=js&
@ ./src/views/About.vue?vue&type=script&lang=js&
@ ./src/views/About.vue
@ ./src/router/index.js
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.2.37:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
如果我删除
import styles from "@/styles/_export.sass";
代码编译得很好。我研究了这个错误,发现 this post here这似乎意味着我的 Vue 配置文件设置不正确。这是我的
vue.config.js
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `@import "@/styles/main.sass"`
}
}
}
};
请注意
main.sass
上面引用的不导入_export.sass
.再一次,这对我来说一直很好,直到我尝试导入 _export.sass
进入我的 JS 文件。我要导入
_export.sass
变量插入到JS脚本中,如上图,我该如何实现呢?
最佳答案
不幸的是,SASS/SCSS 文档没有提到任何关于 export
的内容。 ,因此,除了通过反复试验来猜测和解决它之外,最好的选择是迁移到 SCSS 并实现广泛使用的解决方案(但也没有记录)。
就个人而言,我喜欢导入我的 SCSS 变量,然后将它们导出到 JS。所以我的_export.scss
文件如下所示:
@import "variables";
:export {
// Export the color palette to make it accessible to JS
some-light-blue: $some-light-blue;
battleship-grey: $battleship-grey;
// etc...
}
注意:
_export.scss
至关重要。仅在 JS 文件中使用,在 SCSS 文件中不导入。进口 _export.scss
到您的 SCSS 文件中将导致 a) 在您的 CSS 中导出不必要的样式,以及 b) 在每个编译的 SCSS 文件中重复这些样式导出
关于javascript - 无法将 Sass 变量导出到 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61517117/