javascript - 无法将 Sass 变量导出到 Javascript

Question

我正在尝试将以下 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脚本中，如上图，我该如何实现呢？

Answer 1

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