我可以在Vue js中同时使用SESS LESS

Question

我已经与Buefy一起使用Vue js启动了一个项目。 Buefy（布尔玛）在SASS中开发，我与LESS合作。我想覆盖Buefy的一些值，但是我的项目是使用LESS设置的。我的问题是：

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

在我的组件中，我使用：

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

但我也希望能够使用：

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

可以做到吗？

非常感谢！

Answer 1

“当然可以。”

  

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

继续前进：根据您的Vue设置，Webpack所需的配置（以防万一，但也可以使用gulp，grunt等。）。 >

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

  {
    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