Невозможно экспортировать переменные Sass в Javascript

Question

Я пытаюсь экспортировать следующие переменные SASS в Javascript в моем Vue проекте.

_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 / S CSS ничего не говорится о export, и поэтому, кроме угадывания и решения проблемы методом проб и ошибок, лучше всего перейти на S CSS и реализовать решение, которое широко используется (но также не документировано).

Лично мне нравится импортировать мои переменные S CSS, а затем экспортировать их в 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 и не импортировался в S CSS файлов. Импорт _export.scss в ваши файлы S CSS приведет к a) ненужному экспорту стилей в ваш CSS и b) дублированию этих экспортов стилей в каждом скомпилированном файле S CSS

Answer 2

Вы можете использовать CSS Модули в вас Vue SF C блок стилей , который будет выглядеть примерно так: this:

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

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

Также обратите внимание, что часто люди говорят об использовании Sass, но на самом деле они используют или должны использовать тип файла .scss, который является современным синтаксисом по сравнению со старым .sass, но это вопрос действительно вкус.