一、Vite css处理（模块module、sass less预处理、获取CSS代码字符串）

已于 2023-07-06 14:58:28 修改
阅读量7.5k 收藏
点赞数 2
文章标签： css sass less vite
于 2023-06-17 11:38:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hbiao68/article/details/131258460
版权
文章详细介绍了Vite框架如何处理CSS，包括自动导入、@import内联、PostCSS应用、CSS模块化的使用和优势，以及CSS预处理器如Sass、Less和Stylus的支持。此外，还讨论了禁用CSS注入和配置CSS源地图的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

一、参考

  1. vite 官网 CSS处理介绍

二、CSS 自动导入

  1. 导入 .css 文件将会把内容插入到 <style> 标签中
  2. 同时也带有 HMR 支持
  3. 也能够以字符串的形式检索处理后的、作为其模块默认导出的 CSS。

三、@import 内联和变基

Vite 通过 postcss-import 预配置支持了 CSS @import 内联，Vite 的路径别名也遵从 CSS @import。换句话说，所有 CSS url() 引用，即使导入的文件在不同的目录中，也总是自动变基，以确保正确性。

Sass 和 Less 文件也支持 @import 别名和 URL 变基（具体请参阅 CSS Pre-processors）。

四、PostCSS

如果项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 postcss.config.js)，它将会自动应用于所有已导入的 CSS。

请注意，CSS 最小化压缩将在 PostCSS 之后运行，并会使用 build.cssTarget 选项。

五、CSS 模块化（.module.css）

任何以 .module.css 为后缀名的 CSS 文件都被认为是一个 CSS modules 文件

  1. 定义 example.module.css
/* example.module.css */
.red {
  color: red;
}
  1. 引入module css
import classes from './example.module.css'
document.getElementById('foo').className = classes.red

5.1 自定义 CSS module 导出命名规则

如果 css.modules.localsConvention 设置开启了 camelCase 格式变量名转换（例如 localsConvention: ‘camelCaseOnly’），你还可以使用按名导入。

// .apply-color -> applyColor
import { applyColor } from './example.module.css'
document.getElementById('foo').className = applyColor

5.2 为什么要有 CSS module

一句话概括：防止命名冲突

场景说明:

  • 一个组件最外层的元素类名一般取名 : wrapper
  • 一个组件最底层的元素类名我们一般取名: .footer

你取了footer这个名字, 别人因为没有看过你这个组件的源代码, 也可能去取名footer这个类名

最终可能会导致样式被覆盖（因为类名重复）, 这就是我们在协同开发的时候很容易出现的问题

cssmodule就是来解决这个问题的

大概说一下原理:

  1. module.css (module是一种约定, 表示需要开启css模块化)
  2. 他会将你的所有类名进行一定规则的替换（将footer 替换成 _footer_i22st_1）
  3. 同时创建一个映射对象{ footer: “_footer_i22st_1” }
  4. 将替换过后的内容塞进style标签里然后放入到head标签中 (能够读到index.html的文件内容)
  5. 将componentA.module.css内容进行全部抹除, 替换成JS脚本
  6. 将创建的映射对象在脚本中进行默认导出

5.3 CSS、SCSS module 案例

<template>
  <pre class>
    # 在vite中处理css

    vite天生就支持对css文件的直接处理

    1. vite在读取到main.js中引用到了Index.css
    2. 直接去使用fs模块去读取index.css中文件内容
    3. 直接创建一个style标签, 将index.css中文件内容直接copy进style标签里
    4. 将style标签插入到index.html的head中
    5. 将该css文件中的内容直接替换为js脚本(方便热更新或者css模块化), 同时设置Content-Type为js 从而让浏览器以JS脚本的形式来执行该css后缀的文件
  </pre>
</template>

<script>
import cssModule from  "./css.module.css";
import scssModule from "./sass.module.scss";

console.log("cssModule", cssModule);
debugger
console.log("scssModule", scssModule);

export  default  {
  mounted() {
    const div = document.createElement("div");
    div.innerHTML = `
      cssModule.footerContent
    `
    document.body.appendChild(div);
    div.className = cssModule['footer-content'];
  }
}
</script>

css.module.css

/*:root {*/
/*  --globalColor: red;*/
/*}*/
.footer {
  width: 200px;
  height: 200px;
  background-color: beige;
}

.footer-content {
  width: 200px;
  height: 200px;
  /*
  --globalColor 变量在 vite.config.js 中已经注入了全局文件
  additionalData: `@import "./src/assets/css/global.scss";`,
  */
  background-color: var(--globalColor);
}

sass.module.scss

.content {
  width: 800px;
  .main {
      background: green;
      padding: (100px / 2);
      margin: 100px / 2;
      background-color: red;
      filter: blur(100px);
      // 响应式布局, 左侧一个菜单栏 宽度自适应根据屏幕 30%
      // 400px ---> 父容器
      // 120px  200 * 0.3 -> 60  100px 240px 200px; preset-env会帮助我们做语法降级  vite内部会有一个主流浏览器的支持表
      width: clamp(100px, 30%, 200px);
      user-select: none; // 他在其他浏览器上不支持
  }
}
.main{
  color: blue;
}

六、CSS 预处理器 （sass less stylus）

Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：(开箱即用)

# .scss and .sass
npm add -D sass

# .less
npm add -D less

# .styl and .stylus
npm add -D stylus

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

  2. Vite 为 Sass 和 Less 改进了 @import 解析，以保证 Vite 别名也能被使用。另外，url() 中的相对路径引用的，与根文件不同目录中的 Sass/Less 文件会自动变基以保证正确性。

七、禁用 CSS 注入页面

自动注入 CSS 内容的行为可以通过 ?inline 参数来关闭。在关闭时，被处理过的 CSS 字符串将会作为该模块的默认导出，但样式并没有被注入到页面中。

import './foo.css' // 样式将会注入页面
import otherStyles from './bar.css?inline' // 样式不会注入页面

八、css sourcemap 配置

开发中，为了能快速定位到 CSS的源码位置，可以开启 CSS 的 sourcemap， 修改vite.config.js配置

import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import basicSsl from '@vitejs/plugin-basic-ssl';
// https://github.com/antfu/unplugin-auto-import
import AutoImport from 'unplugin-auto-import/vite';
/* 
  https://github.com/antfu/unplugin-vue-components
  On-demand components auto importing for Vue.(自动将组件引入到Vue中，不用明确代码引入了)
*/
import Components from 'unplugin-vue-components/vite';
// https://www.npmjs.com/package/vite-plugin-pages
import Pages from 'vite-plugin-pages';
import Unocss from 'unocss/vite';
/* 
  https://www.npmjs.com/package/vite-plugin-vue-devtools
  提高Vue 的调试工具
*/
import VueDevTools from 'vite-plugin-vue-devtools';
/* 
  https://github.com/xxholly32/vite-plugin-custom-attr#readme
  Set default values for tags.（设置标签的默认值）
*/
import CustomProps from 'vite-plugin-custom-attr';

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
// export default defineConfig({
//   plugins: [vue()],
// })

export default defineConfig(function (options) {
  // console.log(arguments) // 只有一个参数值
  // console.log(options) //{ mode: 'development', command: 'serve', ssrBuild: false }
  const { mode, command, ssrBuild } = options;
  const env = loadEnv(mode, process.cwd(), '');

  // process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
  // const publicPath = process.env.VITE_BASE_URL;

  return {
    /**
     * 在生产中服务时的基本公共路径。
     * @default '/'
     */
    // base: '/huangbiao/', // 默认是 '/'
    // publicDir: 'public',
    // cacheDir: 'node_modules/.vite',
    // envDir: 'root', // 用于加载 .env 文件的目录。可以是一个绝对路径，也可以是相对于项目根的路径。
    // envPrefix: 'VITE_', // 以 envPrefix 开头的环境变量会通过 import.meta.env 暴露在你的客户端源码中
    resolve: {
      /* 路径使用别名 */
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
      /* 
      引入文件的后缀名称，可以省略
      如果出现同名，按照数组加载的优先顺序
      */
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
    },
    // 服务配置
    server: {
      host: '0.0.0.0',
      port: 3333, // 端口号
      open: true, // 自动在浏览器打开
      // https: true,// 是否开启 https
      // http2: true,// 建议使用 http2, 是否开启 https
      fs: {
        // 可以为项目根目录的上一级提供服务
        allow: ['..'],
      },
      proxy: {
        '^/mockapi': {
          target: 'http://10.32.38.100:3000/',
          changeOrigin: true,
        },
        '^/ctm05zjaefs/': {
          target: 'http://localhost:39696',
          changeOrigin: true,
        },
        // 带选项写法：http://localhost:5173/api/bar -> http://jsonplaceholder.typicode.com/bar
        '/api': {
          target: 'http://jsonplaceholder.typicode.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    // css 处理
    css: {
      preprocessorOptions: {
        scss: {
          /* .scss全局预定义变量，引入多个文件 以;(分号分割)*/
          additionalData: `@import "./src/assets/css/global.scss";`,
        },
      },
      // 可以查看 CSS 的源码
      devSourcemap: true,
    },
    //  生产环境
    build: {
      //指定输出路径
      assetsDir: './static',
      // 指定输出文件路径
      outDir: 'dist',
      sourcemap: true, // 构建后是否生成 source map 文件。如果为 true，将会创建一个独立的 source map 文件。
      // 代码压缩配置
      terserOptions: {
        // 生产环境移除console
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
    plugins: [
      VueDevTools(),
      vue(),
      basicSsl(),
      // Pages({
      //   extensions: ['vue', 'md'],
      //   dirs: [
      //     // basic
      //     { dir: 'src/pages/**', baseRoute: '.' },
      //     // // features dir for pages
      //     // { dir: 'src/features/**/pages', baseRoute: 'features' },
      //     // // with custom file pattern
      //     // { dir: 'src/admin/pages', baseRoute: 'admin', filePattern: '**/*.page.*' },
      //   ],
      // }),
      // Pages({
      //   extensions: ['vue', 'md'],
      // }),

      // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
      Pages({
        dirs: 'src/pages',
        exclude: ['**/comp/*.vue'],
        extensions: ['vue'], // ['vue', 'ts', 'js'],
        extendRoute(route, parent) {
          console.log('route, parent', route, parent);
          /* 
          打印的内容如下
          route, parent {
            name: 'Welcome',
            path: '/welcome',
            component: '/src/pages/Welcome.vue',
            customBlock: undefined,
            props: true
          }
          */
          if (route.path === '/') {
            //给默认路由加一个redirect，默认为index.vue
            return {
              ...route,
              redirect: 'page1',
              meta: {
                auth: true,
              },
            };
          } else {
            return route;
          }
        },
      }),
      Unocss({
        // mode: 'shadow-dom',
        shortcuts: [ // 自定义组合样式，即 样式 cool-blue 代表`bg-blue-500 text-white` 的组合
          { 'cool-blue': 'bg-blue-500 text-white' }, 
          { 'cool-green': 'bg-green-500 text-black' }
        ],
      }),
      AutoImport({
        imports: [
          // 需要自动导入的插件，自定义导入的API
          'vue',
          'vue-router',
          'pinia',
        ],
        dts: 'src/types/auto-import.d.ts', // 指明 .d.ts 文件的位置和文件名
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
      /* 
      // Set default values for tags.
      CustomProps({
        tags: {
          "h1" : {
            style: "font-size: 2rem;"
          },
          "el-button" : {
            type: "success",
            plain: true,
          }, 
        }
      })
      
      <template>
        <h1>change style</h1>
        <el-button>no type</el-button>
        <el-button type="primary">type primay</el-button>
      </template>
      转为
      <template>
        <h1 style="font-size: 2rem;">change style</h1>
        <el-button type="success" plain>no type</el-button>
        <el-button type="primary" plain>type primay</el-button>
      </template>
      */
    ],
  };
});
胖鹅68
关注
工程化:vite4和vue3里面的css.module模块化的研究
峰会路转的博客
04-26 652
如何在vite里面写css的时候vite自动给我们加上这种hash,来进行样式的隔离，防止污染呢。
Vite系列课程 | 11. Vite 配置文件中 CSS 配置（Modules 模块化篇）
everfoot的博客
12-24 778
Vite 提供了灵活的 CSS 模块化配置选项，可以帮助开发者在处理 CSS 时避免样式冲突，并根据项目的需求定制类名生成规则。同时，Vite 还支持对外部库（如）的样式进行处理，确保项目中的样式兼容性和可维护性。
vite-plugin-css-modules:vitejs css modules 名称自动转化插件
05-05
@zebing/vite-plugin-css-modules @zebing/vite-plugin-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时，无需通过:class="$style.cssname", class={styles.cssname}等繁琐的方式调用，而是直接 class="cssname", class="cssname"简单调用，极大的减小工作量，增加开发效率。 暂不支持 vue2.0。在ssr模式中，仅支持自定义classname方式，自定义classname与class共存可能会出错 如何使用? 安装 npm install @zebing/vite-plugin-css-modules --save-dev 使用 在vite.config.js 配置文件中加入配置 import vite
Vite + Vue3中安装vue-devtools工具
最新发布
m0_66970349的博客
02-27 753
从vue-cli（vue2-底层webpack）中转化到create-vue(vue3-底层vite)，新手遇到了非常棘手的问题，我的原来浏览器中安装的vue-devtools在控制台不显示！后面才发现是vue3脚手架里面内置已经配置了 插件 “vite-plugin-vue-devtools”，可能会与浏览器的冲突，导致不显示。该插件通过与Vue和Vite深度集成，提供了一套直观的界面，以图形化的方式展示你的应用程序状态。组件：显示组件树并允许你深入到每个组件的数据和属性中。
vite中对css及css模块化的处理
m0_56772756的博客
06-18 3560
vite天生就支持对css文件的直接处理解决重复类名样式覆盖——预处理器（less，scss…） ：给我们提供了一些方便且非常实用的方法。
Vite CSS Module 优雅的处理样式隔离
zshsats博客
11-25 1666
今天介绍的是我写的一个vite插件vite-plugin-oneof-css-module，该插件主要处理scss module，那它适用于什么场景呢？2. 可以根据不同的文件夹或文件分别进行不同的处理，比如 组件 .c-[local],模板.t-[local]等。1. 最大的特点就是使用scss module 可以不用写 .module.scss 了。4. 在大型项目中做样式隔离。如何使用详情可参考我的文章。3.在微服务中，做样式隔离。
Vite中的CSS工程化方案
郊眠寺
08-19 2674
通过对慢慢的深入了解，发现Vite的功能十分的强大，用起来也十分简便快捷，各种解决方案完全满足日常的开发痛点。) 以下是编译前和编译后的区别) PostCSS的插件还有很多，例如移动端单位转换px转换为rem，压缩。
『精』Sass 核心程序设计指南（这一篇就够了！）
贤哲XianZhe的博客
04-26 694
Sass（英文全称：Syntactically Awesome Stylesheets），在前端领域中，Sass 作为 CSS 的预处理器，即使没使用过，大概率也或多或少听说过 Sass。Sass 包括两套语法。最开始的语法叫做“缩进语法”，与 Haml 类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。而较新的语法叫做“SCSS”，使用和 CSS 一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法分别对应 .sass 和 .scss 两个文件扩展名。
Vue.js CSS管理指南：项目中的最佳实践
![Vue.js CSS管理指南：项目中的最佳实践]...本文首先介绍了Vue.js项目中CSS的基本概览，然后深入探讨了Vue.js的样式绑定机制，包括单文件组件样式的作用域与scoped属性的工作原理，以及class和style绑定的技巧。
【常用组件整理】
Lcc的博客
11-20 1027
常用组件整理
神秘 Arco 样式出现，祭出 Webpack 解决预期外的引用问题
WindRunnerMax
08-06 1154
Webpack是现代化的静态资源模块化管理和打包工具，其能够通过插件配置处理和打包多种文件格式，生成优化后的静态资源，核心原理是将各种资源文件视为模块，通过配置文件定义模块间的依赖关系和处理规则，从而实现模块化开发。Webpack提供了强大的插件和加载器系统，支持了代码分割、热加载和代码压缩等高效构建能力，显著提升了开发效率和性能。是Webpack中用于解析模块路径的配置项，其负责告诉Webpack如何查找和确定模块的位置，核心功能是通过配置来定义模块的查找机制和优先级，从而确保Webpack。
vue 之 css module的使用方法
12-01
前言 最近学习webpack看到了一个新鲜的东西，之前都是通过scoped来区别类名，秉着任何时候学习都不晚的心情，作为小白的我也想揭揭css module的神秘面纱。 css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题。相比于scoped为类名添加一个hash标识效果优秀不少，但相对的书写会繁琐一些。 项目基于cli3搭建，讲真的，我也是被cli3鬼迷心窍了。相比2的繁琐，3提供界面管理对我这样子的小白确实直观很多，而且需要配置vue.config.js也十分合适呢。 开工 动手之前先配置项目，网上很多文章说需要下载css-loader插件，Vue中的v
vue+webpack+vue-router+element+axios全家桶搭建vue项目完整教程详解 2019
PGguoqi的博客
04-19 9229
未完
vite 更好的处理 css module的插件
zshsats博客
09-24 2690
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的。
（03）vite 处理 css
秋来九月八
12-04 1288
css开启 devSourcemap 后，能够快速找到每一个样式对应的文件名，但最好只在开发环境中使用，不开启devSourcemap 时，一般是上生产环境，默认情况下也是不开启的。启动服务器之后，发现css module的类名都被替换了，加了hash。componentA index.module.css 配置。vite 天生就支持对css文件的处理，主要的处理流程如下。componentB index.module.css 配置。原本index.css的文件被替换了。创建一个index.css文件。
vite中css模块化以及支持less等预编译
热门推荐
fighting_sunnyGirl的博客
08-16 1万+
配置vite.config.js文件，无需安装任何插件 -关于css的都在css模块下面进行配置 import path from 'path' export default defineConfig({ css:{ //* css模块化 modules: { // css模块化 文件以.module.[css|less|scss]结尾 generateScopedName: '[name]__[local]___[hash:base64:5]', hashPre..
【Vite】对 CSS 处理
Superman_H的博客
04-15 2650
Vite 会使用 esbuild 或 PostCSS 来转换 CSS 文件 Vite 解析 CSS 文件的过程： ① 使用 fs 模块读取 .css 文件的内容 ② 创建一个 style 标签，将 .css 文件的内容 copy 到 style 标签内 ③ 将 style 标签插入到 index.html 的 head 标签中 ④ 将该 .css 文件的内容替换为 Js 脚本，以便于 CSS 模块化 & 热更新 # CSS 模块化 (CSS Module) 在协同开发时，可能会出现
Vite学习 --- CSS相关
cp3_hxl的博客
05-10 1045
我们写的css代码（怎么爽怎么来）—> postcss —> 【去将语法进行编译(嵌套语法，函数，变量)成原生css】less sass 等预处理器都可以做 —> 再次对未来的高级css语法进行降级 —> 前缀补全 —> 浏览器客户端.我们写的js代码(怎么爽怎么来) --> babel --> 将最新的ts语法进行转换js语法 --> 做一次语法降级 --> 浏览器客户端去执行.在vite.config.js 中我们通过css属性去控制整个vite对于css的处理行为.less是可以定义变量的.
【Vite】vite.config.js 中的 CSS 配置详解
lph159的博客
09-21 4500
在 Vite 项目中，CSS 的加载与处理是默认支持的。Vite 支持PostCSSSassLess等预处理器，并且自动将.css文件模块化处理。同时，你也可以通过配置来定制更复杂的需求，例如 CSS 的自动导入、样式变量的全局定义等。Vite 的 CSS 配置主要在文件中进行，具体的 CSS 配置项都放置在css对象中。Vite 使用esbuild作为默认的 CSS 压缩工具，你可以通过build: {你还可以通过配置css.minify来更细粒度地控制 CSS 的压缩行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值