博客站

在 Vite 中使用 CSS 预处理器（如 Sass、Less、Stylus）非常简单，Vite 内置了对这些预处理器的支持。以下是详细步骤和配置说明：

1. 安装 CSS 预处理器

• Sass：

  npm install sass --save-dev
  

• Less：

  npm install less --save-dev
  

• Stylus：

  npm install stylus --save-dev
  

2. 使用 CSS 预处理器

• Sass：

  • 在 .vue 文件或 .scss 文件中使用 Sass 语法。
  • 示例：

    // src/styles/main.scss
    $primary-color: #3498db;
    
    body {
      background-color: $primary-color;
    }
    

  • 在组件中引入：

    <style lang="scss" scoped>
    @import './styles/main.scss';
    </style>
    

• Less：

  • 在 .vue 文件或 .less 文件中使用 Less 语法。
  • 示例：

    // src/styles/main.less
    @primary-color: #3498db;
    
    body {
      background-color: @primary-color;
    }
    

  • 在组件中引入：

    <style lang="less" scoped>
    @import './styles/main.less';
    </style>
    

• Stylus：

  • 在 .vue 文件或 .styl 文件中使用 Stylus 语法。
  • 示例：

    // src/styles/main.styl
    $primary-color = #3498db
    
    body
      background-color $primary-color
    

  • 在组件中引入：

    <style lang="stylus" scoped>
    @import './styles/main.styl';
    </style>
    

3. 配置 Vite

• Sass：

  • Vite 默认支持 Sass，无需额外配置。
  • 如果需要全局引入变量或混合，可以在 vite.config.js 中配置：

    export default defineConfig({
      css: {
        preprocessorOptions: {
          scss: {
            additionalData: `@import "@/styles/variables.scss";`,
          },
        },
      },
    });
    

• Less：

  • Vite 默认支持 Less，无需额外配置。
  • 如果需要全局引入变量或混合，可以在 vite.config.js 中配置：

    export default defineConfig({
      css: {
        preprocessorOptions: {
          less: {
            additionalData: `@import "@/styles/variables.less";`,
          },
        },
      },
    });
    

• Stylus：

  • Vite 默认支持 Stylus，无需额外配置。
  • 如果需要全局引入变量或混合，可以在 vite.config.js 中配置：

    export default defineConfig({
      css: {
        preprocessorOptions: {
          stylus: {
            additionalData: `@import "@/styles/variables.styl";`,
          },
        },
      },
    });
    

4. 示例：完整的 Vite + Sass 项目

• 项目结构：

  vite-sass-project/
  ├── public/
  ├── src/
  │   ├── assets/
  │   ├── components/
  │   ├── styles/
  │   │   ├── variables.scss
  │   │   └── main.scss
  │   ├── App.vue
  │   └── main.js
  ├── index.html
  ├── vite.config.js
  └── package.json
  

• vite.config.js：

  import { defineConfig } from 'vite';
  import vue from '@vitejs/plugin-vue';
  
  export default defineConfig({
    plugins: [vue()],
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables.scss";`,
        },
      },
    },
  });
  

• src/styles/variables.scss：

  $primary-color: #3498db;
  

• src/styles/main.scss：

  body {
    background-color: $primary-color;
  }
  

• src/App.vue：

  <template>
    <div id="app">
      <h1>Hello, Vite + Sass!</h1>
    </div>
  </template>
  
  <style lang="scss" scoped>
  @import './styles/main.scss';
  </style>
  

总结

在 Vite 中使用 CSS 预处理器（如 Sass、Less、Stylus）非常简单，只需安装相应的预处理器并在 vite.config.js 中进行配置即可。通过合理配置，可以充分利用 CSS 预处理器的功能，提升开发效率和代码质量。