无法将 Sass 变量导出到 Javascript [英] Cannot Export Sass Variables into Javascript

问题描述

我正在尝试将以下 SASS 变量导出到我的 Vue 项目中的 Javascript.

I'm trying to export the following SASS variables into Javascript within my Vue project.

_export.sass

:export
    colorvariable: blue
    othercolorvariable: red

我正在关注 这篇文章 作为模板.但是，当我尝试在下面导入我的 sass 文件时...

I'm following the response in this post as a template. However when I try to import my sass file below...

关于.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

如果我从@/styles/_export.sass"中删除 import 样式； 代码编译正常.

If I remove import styles from "@/styles/_export.sass"; the code compiles fine.

我研究了这个错误，发现 this post here 这似乎暗示我的 Vue 配置文件设置不正确.这是我的 vue.config.js

I've researched this error and found this post here which seems to imply that my Vue config file is not set correctly. Here is my vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/styles/main.sass"`
            }
        }
    }
};

请注意，上面引用的 main.sass 不会导入 _export.sass.再说一次，这对我来说很好用，直到我尝试将 _export.sass 导入到我的 JS 文件中.

Note that main.sass referenced above does not import _export.sass. And again, this has worked fine for me until I tried importing _export.sass into my JS file.

我想将_export.sass变量导入到JS脚本中，如上图，如何实现?

I want to import _export.sass variables into the JS script, as shown above, how can I achieve this?

推荐答案

不幸的是，SASS/SCSS 文档没有提及关于 export 的任何内容，因此，除了通过试验和解决方案猜测和解决之外错误，最好的办法是迁移到 SCSS 并实施广泛使用(但也没有记录)的解决方案.

Unfortunately the SASS/SCSS documentation does not mention anything about export, and as such, other than guessing and solving it through trial and error, your best bet is to migrate to SCSS and implement the solution that is widely used (but also not documented).

就我个人而言，我喜欢导入我的 SCSS 变量，然后将它们导出到 JS.所以我的 _export.scss 文件看起来像这样:

Personally, I like to import my SCSS variables, and then, export them to JS. So my _export.scss file looks like this:

@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 文件中这些样式导出的重复

NOTE: It is vitally important that _export.scss is only utilised in JS files, and is not imported in SCSS files. Importing _export.scss into your SCSS files will result in a) unecessary style exports in your CSS, and b) duplications of these style exports throughout every compiled SCSS file

这篇关于无法将 Sass 变量导出到 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！