首页

Appearance

CSS 样式管理 ​

Vite 中的样式支持 ​

Vite 中对 CSS 的支持，参考文档。

  • 由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。
  • 但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：
shell
# .scss and .sass
yarn add -D sass

# .less
yarn add -D less

# .styl and .stylus
yarn add -D stylus
shell
# .scss and .sass
npm install -D sass

# .less
npm install -D less

# .styl and .stylus
npm install -D stylus

如果使用的是单文件组件，可以通过 <style lang="sass">（或其他预处理器）自动开启。

样式作用域 ​

深度作用操作符新语法：:deep(<inner-selector>)

配置使用全局样式变量 ​

为了能够在组件内直接使用全局变量、mixin 等，需要特殊配置。

具体配置参考 Vite 官方文档：css.preprocessoroptions

配置参考：

ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      // 假设有'src/variables.sass'这个文件
      scss: {
        additionalData: '@import "@/styles/variables.scss";',
      },
    },
  },
})

如果是多个文件可以这样配置：

ts
export default defineConfig({
  // ...
  scss: {
    // 假设有'src/styles/variables.sass'以及'src/styles/mixin.scss'文件
    additionalData: '@import "@/styles/variables.scss";@import "@/styles/mixin.scss";',
  },
})