无法将 Sass 变量导出到 Javascript

Question

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

_export.sass

:export
    colorvariable: blue
    othercolorvariable: red

我将这篇文章中的回复作为模板。但是，当我尝试在下面导入我的 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";代码编译正常。

我研究了这个错误，并在这里找到了这篇文章，这似乎暗示我的 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 文件中这些样式导出的重复