无法将 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 文件之前，这对我来说效果很好。

我想在JS脚本中导入_export.sass变量，如上图，如何实现呢？

Answer 1

global.scss

$primary-color: #d51a1a; //Red

:export {
  appColor: $primary-color;
}

app.vue

import variables from '../global.scss'

您可以通过以下方式访问它：

variables.locals.appColor

Answer 2

你可以在你Vue SFC styles block中使用CSS Modules，其中would look something like这个：

<template>
  <button :class="$style.button" />
</template>

<style module>
  .button {
    color: red
  }
</style>

另外请注意，人们经常谈论使用 Sass，但实际上他们正在或应该使用 .scss 文件类型，与旧的 .sass 相比，这是现代语法，但它确实是品味问题.

Answer 3

不幸的是，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 文件中重复