我可以在 Vue js 中同时使用 SASS 和 LESS答案

【问题标题】：Can i use both SASS an LESS in Vue js我可以在 Vue js 中同时使用 SASS 和 LESS
【发布时间】：2018-12-21 11:33:27
【问题描述】：

我已经开始了一个使用 Vue js 和 Buefy 的项目。 Buefy (Bulma) 是在 SASS 中开发的，我使用 LESS。我想覆盖 Buefy 的一些值，但我的项目是用 LESS 设置的。我的问题是：

我可以同时使用这两种预处理器吗？

在我使用的组件中：

<style lang="less"></style>

但我也希望能够使用：

<style lang="sass"></style>

这个可以吗？

非常感谢！

【问题讨论】：

【解决方案1】：

“当然可以”

但是，我不鼓励您这样做，因为您将使用不同的预处理器（范围、类命名、意外的奇怪错误）对样式进行两次预处理，您必须调试代码以查看它是否正常工作对。

前进：取决于您的 Vue 设置，您需要的 webpack 配置（如果您使用它，但 gulp、grunt 等也可以使用）。 p>

如果是 webpack，只需在 {projectRoot}/webpack.config.js 中添加 Sass 的配置，在 .vue 规则下的 module rules 数组中：

  {
    test: /\.vue$/,
    loader: 'vue'
  }, 
  // CODE GOES HERE =====>
  {
      test: /\.s[a|c]ss$/,
      loader: 'style!css!sass'
  }

并且在您的vue 选项中的同一个文件中（如果没有则创建，应该在module 选项下）：

vue: {
    loaders: {
      scss: 'style!css!sass'
    }
  }

你必须安装node-sass和css-loader和sass-loader和style-loader...

$ npm install --save-dev node-sass css-loader sass-loader style-loader

【讨论】：