我可以在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规则下的module rules数组内的{projectRoot}/webpack.config.js添加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