scss自动生成min.css和css

自动生成CSS和min.css文件是由安装了easysass插件引起的。要关闭自动生成文件的功能，需要修改easysass的配置。以下是修改步骤：
1. 找到设置并打开它。
2. 将其中的css和min.css配置修改为以下内容：
"easysass.excludeRegex": "false",
"easysass.formats": [
{
"format": "expanded",
"extension": ""
},
{
"format": "compressed",
"extension": ""
}
]
3. 完成以上步骤后，就不会再生成CSS和min.css文件了。

关于scss自动生成min.css和css的

相关问题

vue3+ts使用wow.js

首先，需要安装 `wow.js` 和 `animate.css`：

npm install wow.js animate.css

然后在 `main.ts` 中引入：

import { createApp } from 'vue';
import App from './App.vue';
import WOW from 'wow.js';

import 'animate.css/animate.min.css';
import './assets/styles/main.scss';

const app = createApp(App);

// 初始化 WOW.js
const wow = new WOW();
wow.init();

app.mount('#app');

最后，在需要使用动画效果的元素上添加 `wow` 类名即可：

<template>
  <div class="wow" data-wow-duration="2s" data-wow-delay="0.5s">
    <h1>Hello, World!</h1>
    <p>This is a demo of using wow.js in Vue 3 with TypeScript.</p>
  </div>
</template>

注意，`data-wow-duration` 和 `data-wow-delay` 属性可以用来控制动画的持续时间和延迟时间。需要在 `main.scss` 中定义 `.wow` 类的样式：

.wow {
  visibility: hidden;
}
.wow.animated {
  visibility: visible;
}

这样就可以在 Vue 3 + TypeScript 中使用 `wow.js` 进行动画效果了。

做一个scss的pc端适配

首先，我们需要设置一个全局的基准字体大小，比如：

$base-font-size: 16px;
html {
  font-size: $base-font-size;
}

这样我们就可以使用相对单位rem来进行适配了。接下来，我们可以使用媒体查询来对不同屏幕尺寸进行适配。

例如，对于小于等于768px的屏幕，我们可以设置为移动端样式：

@media screen and (max-width: 768px) {
  // 移动端样式
}

对于大于768px的屏幕，我们可以设置为PC端样式：

@media screen and (min-width: 769px) {
  // PC端样式
}

在PC端样式中，我们可以使用栅格系统来进行布局，例如：

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1200px;
  .col {
    flex: 1 1 0;
    padding: 0 15px;
    &.col-1 {
      flex-basis: 8.33%;
    }
    &.col-2 {
      flex-basis: 16.67%;
    }
    // ...
    &.col-12 {
      flex-basis: 100%;
    }
  }
}

这样就可以实现PC端的栅格布局了。同时，我们也可以使用CSS3的flexbox和grid来进行布局，具体使用方式可以参考相关文档。

总之，通过设置全局的基准字体大小，配合媒体查询和栅格系统等布局方式，就可以实现一个基本的PC端适配了。