时间戳

首页 > 解决方案 > 如何使用 SASS 从外部 Vue 模块重写自定义 CSS 方法？

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

问题描述

我在我们的 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 和前端的初学者。

[编辑]忘了提一个重要的细节。我们已经使用了sass-loader@7.1.0，并且我已经sass为其他组件编写了一些其他代码。那些被渲染得很好。这就是为什么我想知道它是否与vue-cal特定方法有关。

标签： cssvue.jssass

解决方案

您需要使用 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 文档

推荐阅读