成功解决Vue项目中css文件未生效

最新推荐文章于 2025-03-26 18:38:28 发布
原创 最新推荐文章于 2025-03-26 18:38:28 发布 · 3.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #css #前端

在Vue项目中，所有的CSS文件通常存放于/styles目录下。为了使这些文件生效，可以将它们导入到index.css，然后仅在main.js中引入index.css，以此实现对其他CSS文件的引用和加载。

Vue项目自己编写的css文件或者外部引入的css文件都是放在/styles目录下：
在这里插入图片描述
要想引入的css文件生效，可以通过以下做法：
将其impor进index.css文件下
在这里插入图片描述
然后在main.js文件中只需要引入index.css文件即可
在这里插入图片描述
这样其余的css文件也能够生效

JavaWizard-M
关注
解决Vue打包上线之后部分CSS不生效的问题
10-16
今天小编就为大家分享一篇解决Vue打包上线之后部分CSS不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue element 项目默认css文件 style
01-02
总的来说，Vue Element项目中的`styles`文件是项目样式管理的核心部分，它负责存储和管理全局样式，通过在`main.js`中引入，确保这些样式在整个项目中生效。合理地使用和组织`styles`文件，可以提高项目的可维护性和...
vue-cli设置css不生效的解决方法
01-19
我们有的项目使用的是老的vue-cli脚手架生成的，今天想写点东西，发现.vue文件里面 style 里面写的样式都不生效了，很自然就想到是不是loader的问题。 在这种项目的webpack.base.config.js一般设置loader的 rules: [ ...(config.dev.useEslint ? [createLintingRule()] : []), { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/
Vue 设置CSS样式不起作用解决
weixin_58853115的博客
04-15 889
经过debug返现是样式没起作用。Vue设计代码，但是设置CSS样式不起作用。更改后，输入添加了边框。
【vue项目部署CSS失效】VUE部署后css样式加载无效和失效多种情况解决方案
热门推荐
赏樱看雪撸代码
12-01 1万+
vue项目部署CSS失效，css样式加载无效，nginx部署css失效，css文件404，服务器样式失效 部署项目css失效
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
vue+css——vue项目中渲染遍历生成html结构，css样式不生效问题解决——基础积累
yehaocheng520的博客
02-08 1411
vue+css——vue项目中渲染遍历生成html结构，css样式不生效问题解决——基础积累
设置css样式不生效
程序员超超的博客
03-15 583
比如现在开发的是vue项目，需要使用v-html指令插入html，并设置一下插入的html样式，例如demo是这样的。比如这样，我想把p标签里面的文字变成红色，但是这样设置完是不生效的，因为这里设置了style scoped，所有。所以就不生效了，解决办法也很简单，使用深度选择器就可以，像这样。深度选择器随着vue版本有所变化，具体可以自己查一下文档。
为什么在vue中写的css都没法生效
weixin_44770377的博客
09-09 3948
为了确保css不被全局污染，我们给每个组件的style添加了scoped，其实这样就实现了样式的模块化 vue中的scoped属性的效果主要通过PostCSS转译实现；如： 转译前： <template> <div class="example">hi</div> </template> <style scoped> .exampl...
vue 组件中添加样式不生效的解决方法
12-29
如何产生 在开发项目中遇到在组件中添加样式不生效的情况。具体场景如下 //// vue 组件 //我用js在上面div标签中插入一个text goes here [removed] export default { ... mounted(){ $('.box').html('text goes here') }, ... } [removed] //styl
vue已经引入，但是css样式不显示
haidao1211的博客
12-14 2212
将以下属性设置成了false，去掉文件名中的 .module。启用该属性后，会转译第三方依赖，导致部分插件和js无法导入。2、vue.config.js配置错误。在main.js中单独引入一下文件。默认值为true，注释即可。1、未单独引入css文件。
Vue项目 打包上线之后部分CSS不生效
qq_39971139的博客
03-28 2997
首先注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), 然后在utils.js中添加，...
vue如何style引入CSS,引入css不生效不报错
weixin_45271385的博客
09-25 1704
1 怎么引入,在style里引入 <style> @import '../../assets/css/chat.css'; </style> 2 不生效还不报错 重新yarn serve(重启vue)就好了 个人经验，没帮到你就不好意思啦，原理我也不懂
vue3.0项目中全局注入scss样式不生效原因
XUELINGMM的博客
05-16 5321
原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用，并且里面有内容（猜测因为配置文件是在每个 vue 文件单独引入的原因），则 scss.additionalData 配置的全局scss文件就可以正确引入了
vue3 + vite 导入公共scss文件无效的问题
samscat的博客
03-22 5436
以下是vite.config.js的相关配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' const isProduction = false; // https://vitejs.dev/config/ export default defineConfig({ // 在生产中服务时的基本公共路径 base: isProduction ? './
【已解决】Vue全局引入scss 个别页面不生效 / 不自动引入全局样式
bao
10-13 2273
Vue 全局引入 Scss 文件不生效
css样式不生效的排查思路（vue框架下）
lu2322337891的博客
03-26 999
那么我们在调整css样式发现效果不生效时，我们应该怎么去排查呢。
vue项目中Tailwind CSS flex布局不生效
最新发布
11-13
虽然提供的引用未直接涉及Vue项目中Tailwind CSS flex布局不生效的解决方案，但可以从Tailwind CSS的通用使用问题排查思路来分析解决办法。 ### 1. 检查Tailwind CSS配置 要保证Tailwind CSS的配置文件（通常是`tailwind.config.js`）里包含了项目中所有使用Tailwind类的文件路径。像在Vue 3项目里，配置示例如下： ```javascript module.exports = { content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, plugins: [], } ``` 此配置表明Tailwind会扫描`index.html`以及`src`目录下所有的`.vue`、`.js`、`.ts`、`.jsx`、`.tsx`文件，从而生成对应的CSS类。 ### 2. 确认CSS文件引入 要确保在项目的入口文件（如`main.js`或者`main.ts`）里正确引入了Tailwind CSS文件。在Vue项目中，一般会在入口文件添加如下代码： ```javascript import '@/static/tailwind.css'; ``` ### 3. 检查类名拼写 要仔细检查在Vue组件里使用的Tailwind CSS flex布局类名是否拼写正确。例如，使用`flex`类来启用flex布局，`flex-row`或者`flex-col`来指定主轴方向。示例代码如下： ```vue <template> <div class="flex flex-row"> <div>Item 1</div> <div>Item 2</div> </div> </template> ``` ### 4. 查看CSS优先级 要确保没有其他CSS规则覆盖了Tailwind CSS的flex布局类。可以使用浏览器的开发者工具（如Chrome的开发者工具）检查元素的样式，查看是否有其他样式规则影响了flex布局。 ### 5. 重新生成CSS文件 有时候，Tailwind CSS的配置发生变化之后，需要重新生成CSS文件。可以运行如下命令来重新生成： ```bash npx tailwindcss -i ./tailwind-input.css -o ./static/tailwind.css ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值