vue为什么没有sass • Worktile社区

worktile

Worktile官方账号

Vue本身并不是没有支持Sass的，但在Vue项目中，你需要额外的配置才能使用Sass。这是因为Sass是一种CSS预处理器，需要编译成普通的CSS才能在浏览器中使用。

要在Vue项目中使用Sass，你可以按照以下步骤进行配置：

首先，确保你的项目已经安装了Sass依赖。可以使用npm或yarn来安装依赖，命令如下：

npm install sass-loader node-sass --save-dev

安装完成后，在项目的配置文件vue.config.js（如果没有则需要自己创建）中，添加以下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
        sassOptions: {
          indentedSyntax: true // 是否使用缩进的Sass语法
        }
      }
    }
  }
}

之后，在Vue组件的style标签中，你就可以使用Sass来编写样式了：

<style lang="sass">
  .container
    width: 100%
    height: 100vh
    background-color: red
</style>

以上就是在Vue项目中使用Sass的基本配置步骤。需要注意的是，如果你使用的是Vue CLI创建的项目，可能已经默认安装了Sass，你只需要按照上述方式来编写Sass样式即可。

总结起来，Vue并不是没有支持Sass的，但你需要进行相应的配置才能在Vue项目中使用Sass。这样可以更方便地使用Sass来编写可维护性高的样式代码。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue框架中，虽然官方没有原生支持Sass，但是我们仍然可以使用Sass来编写样式。下面是一些原因解释为什么Vue没有内置Sass：

模块化的CSS：
Vue推崇以组件为核心的开发方式，每个组件都有自己的独立样式，当一个组件被引入到另一个组件中时，它的样式也就被引入了。这样可以有效地管理和维护应用的样式。

如果Vue直接支持Sass，就会违背了这个设计原则。因为Sass具有全局作用域，一旦在一个组件中引入了Sass样式，那么这个样式会影响到整个应用，不符合组件化的思想。

CSS预处理器的选项多样性：
在前端开发中，有很多种CSS预处理器可供选择，如Sass、Less和Stylus等。如果Vue选择支持Sass，也会引发其他预处理器用户的不满。

为了保持灵活性和开放性，Vue选择了提供基础的CSS处理能力，而将具体的预处理器选项留给开发者去选择。这样开发者可以根据自己的需求和喜好选择合适的CSS预处理器。

插件和工具的丰富性：
尽管Vue没有内置的Sass支持，但是Vue的生态系统非常丰富，有很多第三方插件和工具可以与Vue一起使用。例如，我们可以使用vue-cli工具来快速搭建Vue项目，并结合webpack配置Sass的编译和引入。
前端工程化的发展：
前端开发工程化已经成为了现代化前端开发的标配，而不再是手动引入和编译CSS的时代。现在我们通常使用构建工具如webpack来处理前端资源。

通过配置webpack，我们可以轻松地支持Sass编译，并将其转换为浏览器可以识别的CSS样式。这样一来，我们就不再需要依赖框架本身来提供Sass的支持。

降低复杂性和学习成本：
Vue致力于简化开发者的工作，提供易于上手和简洁的API。如果Vue内置Sass支持，这将增加框架的复杂性和学习难度。而且，并不是所有开发者都使用或喜欢使用Sass，所以将其作为可选项会更加普适。

总之，尽管Vue没有内置Sass支持，但通过使用webpack等工具和第三方插件，我们可以轻松地在Vue项目中使用Sass来编写样式。Vue的设计理念和目标是为了提供简单、灵活和易于维护的前端开发体验，而不是过度集成各种功能和工具。

1年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue官方原生不支持Sass是因为Vue的初始目标是尽可能保持小巧和简单，只提供核心功能。由于Sass是一个功能非常丰富的CSS预处理器，它引入了许多额外的功能和语法，这会使Vue的体积增大，并增加复杂性。所以，Vue团队决定将与CSS相关的功能集中在核心的CSS模块中，而不是集成Sass。

然而，尽管Vue没有原生支持Sass，但开发者仍然可以在Vue项目中使用Sass。下面我将介绍两种常见的在Vue项目中使用Sass的方法。

方法一：使用sass-loader和node-sass

首先，在项目中安装依赖包sass-loader和node-sass：

npm install sass-loader node-sass --save-dev

在webpack配置文件中的module.rules中添加以下配置：

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      // ...
    ]
  },
  // ...
}

在Vue组件中使用Sass。

现在，你可以在Vue组件的样式标签中使用Sass语法编写样式了：

<template>
  <div class="component">
    <!-- ... -->
  </div>
</template>

<style lang="sass">
.component
  background-color: red
</style>

方法二：使用vue-cli脚手架的插件

如果你使用vue-cli进行项目开发，可以通过插件的形式快速集成Sass支持。

在项目中安装vue-cli：

npm install -g @vue/cli

创建一个新的Vue项目：

vue create my-project

在创建项目的过程中选择Sass预处理器。

在选择预设时，你可以选择"Manually select features"，然后勾选"CSC pre-processors"，并选择Sass作为预处理器。

在Vue组件中使用Sass。

现在，你可以在Vue组件的样式标签中使用Sass语法编写样式了：

<template>
  <div class="component">
    <!-- ... -->
  </div>
</template>

<style lang="sass">
.component
  background-color: red
</style>

总结：

虽然Vue官方不原生支持Sass，但可以通过安装相关的依赖包或使用vue-cli插件的方式在Vue项目中使用Sass。这样，开发者就可以享受到Sass强大的功能和语法，并能更便捷地编写CSS样式。

1年前 0条评论