在main引入css修改变量不生效 在vite.congfig引入就生效是怎么回事
时间: 2024-05-23 22:09:13 浏览: 9
这可能是因为你在主要的 CSS 文件中引入了该变量,但是该变量在该文件的加载之前就被加载了并在另一个文件中定义了。请尝试在主要的 CSS 文件中将该变量定义在加载其它文件之前,或在其它文件中使用 `!important` 标记强制该变量重写。另外,也可能是 Vite 的编译顺序问题,你可以在 vite.config 文件中检查你的配置是否正确。
相关问题
postcss-pxtorem在vite.config.ts中配置报错
如果您想在 `vite.config.ts` 中配置 `postcss-pxtorem`,您需要使用 `postcss` 插件。您可以按照以下步骤进行配置:
1. 安装 `postcss-pxtorem` 和 `postcss`:
```
npm install postcss postcss-pxtorem --save-dev
```
2. 在 `vite.config.ts` 中添加 `postcss` 插件:
```typescript
import { defineConfig } from 'vite';
import postcss from 'postcss';
import pxtorem from 'postcss-pxtorem';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
{
name: 'postcss',
async transform(code, id) {
if (!/\.vue\?vue/.test(id)) {
return;
}
const { css } = await postcss([pxtorem]).process(code, { from: undefined });
return {
code: `export default ${JSON.stringify(css)}`,
};
},
},
],
});
```
请注意,我们只对 `.vue` 文件进行 `postcss` 转换。
这应该可以解决您遇到的问题。如果还有其他问题,请随时问我。
postcss.config.js引入到vite
在使用 Vite 构建工具的项目中,可以使用 PostCSS 来处理 CSS,这可以通过在项目根目录下创建 `postcss.config.js` 文件来完成配置。
在 `postcss.config.js` 中,我们需要定义一个 `plugins` 数组,用于存放我们需要使用的 PostCSS 插件。例如,我们可以使用 `autoprefixer` 插件来自动添加浏览器前缀:
```js
// postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
```
然后,在 `vite.config.js` 中,我们需要将 PostCSS 插件添加到 Vite 的 CSS 预处理器选项中:
```js
// vite.config.js
module.exports = {
css: {
preprocessorOptions: {
postcss: {
plugins: [
require('autoprefixer')
]
}
}
}
}
```
这样,我们就可以在 Vite 中使用 PostCSS 了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)