Question

我在Vue项目中使用了名为vue-cal的第三方模块，该模块用于呈现日历。您可以像这样使用其custom 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，在您的webpack配置文件中，请确保具有以下条件：

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 documentation

Answer 2

[已解决]

事实证明，问题不在于sass，而在于样式为scoped。 Scoped样式仅应用于组件本身，但是vue-cal是一个外部模块，因此未应用样式。删除scoped可以立即解决此问题。

如何使用SASS从外部Vue模块重写自定义CSS方法？

2 个答案: