Как использовать SASS для переписывания пользовательских методов CSS из внешнего модуля Vue?

Question

Я использую сторонний модуль в нашем проекте Vue с именем vue-cal, который предназначен для рендеринга календаря.Вы можете настроить внешний вид ваших ячеек даты, используя их пользовательские css следующим образом.

<style>
.vuecal--month-view .vuecal__cell-content {justify-content: flex-start;}
.vuecal__cell.selected {background-color: red;}
</style>

Однако мы используем sass для нашего проекта, и я попытался переписать его, как показано ниже, нотеперь <style> вообще не применяется.Как я могу правильно переписать это в sass, или нет способа переписать пользовательские методы внешних библиотек, подобные этим, в синтаксисе не-css?

<style lang="sass" scoped>
.vuecal--month-view
  .vuecal__cell-content
    justify-content: flex-start 
.vuecal__cell.selected
  background-color: red
</style>

Извините, если это основной вопрос - все еще начинающийVue, CSS и внешний интерфейс в целом.

[EDIT] Забыл упомянуть важную деталь.Мы уже используем sass-loader@7.1.0, и я уже написал некоторый другой код в sass для других компонентов.Те, которые оказываются в порядке.Вот почему мне интересно, связано ли это с vue-cal -специфическими методами.

Answer 1

Вам необходимо использовать vue-loader для предварительной обработки SASS в нативный CSS

Шаг 1:

npm install -D sass-loader sass

Шаг 2, в вашем конфигурационном файле веб-пакета убедитесь, что:

module.exports = {
  module: {
    rules: [
      // ... other rules omitted

      // this will apply to both plain `.scss` files
      // AND `<style lang="scss">` blocks in `.vue` files
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  // plugin omitted
}

Это необходимые скелеты. Для получения дополнительной информации см .: документация vue-loader

Answer 2

[РЕШИТЬ]

Оказалось, что проблема была не в sass, а в том, что стиль был scoped. Стили Scoped применяются только к самому компоненту, но vue-cal является внешним модулем, поэтому стили не применялись. Удаление scoped немедленно решило проблему.