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

【问题标题】：How to use SASS to rewrite custom CSS methods from an external Vue module?如何使用 SASS 从外部 Vue 模块重写自定义 CSS 方法？
【发布时间】：2019-11-06 20:31:48
【问题描述】：

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

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

【问题讨论】：

鉴于样式规则的简单性，有什么理由必须使用 Sass？
可能是特异性问题，范围内的 CSS 可能会覆盖您从 sass 生成的 CSS
@Phil 这是一个团队项目，我们将 sass 用于我们的其他组件 - 所以为了保持一致性，如果可能的话，我也想在这个组件中使用 sass。
那么 CSS 版本真的可以工作，而 Sass 版本不行吗？您的浏览器的 Elements 控制台对应用于相关元素的样式有何说明？
不用担心，感谢您尝试查明问题。是的，我的示例中的代码是我的实际代码的逐个字母副本。不可能是"scss"。

标签： css vue.js sass

【解决方案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

【讨论】：

很确定这些天的偏好是sass (dart) 而不是node-sass ~ cli.vuejs.org/guide/css.html#pre-processors
抱歉，忘记提及一个重要细节。我们已经使用sass-loader@7.1.0，并且我在sass 中写了一些其他的东西，一切都很好。这就是为什么我想知道它是否与vue-cal-specific 方法有关。
您是否将 css 导入到您的组件中？那么加载器是否正确编译了css？
@Dor-Ron 正确，如果我在 css 中编写 <style> 它会被渲染，但如果我使用 sass 版本则不会。所以我想知道我的sass语法是否错误，或者这段代码是否必须用css编写。
如果您查看 sass 版本的源代码，是否会出现您想要的样式？如果不是，那么 sass 没有被正确编译和注入，否则我不确定

【解决方案2】：

[已解决]

原来问题不是sass，而是样式是scoped。 Scoped 样式仅适用于组件本身，但 vue-cal 是外部模块，因此未应用样式。删除 scoped 立即解决了这个问题。

【讨论】：