新手问题angular6配置CSS&jquery不生效

最新推荐文章于 2024-01-24 09:20:09 发布
最新推荐文章于 2024-01-24 09:20:09 发布
阅读量602 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/l379075/article/details/88909034
本文介绍如何在Angular6中正确配置全局样式和引入第三方库的方法。通过编辑angular.json文件，可以添加自定义样式表和Bootstrap等资源，确保项目的样式能够正常加载。

angular6的文件目录不同于ng4，按照学习视频中的方法样式没有生效，需要修改文件angular.json，找到第一个"styles，在其中添加上如下的位置信息

    "styles": [
      "src/styles.css",
      "node_modules/bootstrap/dist/css/bootstrap.css"
    ],
    "scripts": [
      "node_modules/jquery/dist/jquery.js",
      "node_modules/bootstrap/dist/js/bootstrap.js"
    ],
最后，一定要记得重启，配置才能生效

从零开始学习网络安全渗透测试之基础入门篇——（一）Web应用&架构搭建&站库分离&配置受限&DNS解析
love6a6的博客
07-26 1229
Web应用，全称Web应用程序（Web Application），指的是通过Web浏览器进行访问和使用的应用软件。它们通常基于Web技术，如HTML、CSS和JavaScript，运行在服务器上，用户可以通过网络（例如互联网）使用各种设备（如个人电脑、平板电脑、智能手机等）访问这些应用。
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
10-23
尽管现在已经有了许多更新的技术，例如React、Vue和Angular等现代前端框架，但jQuery由于其易用性和广泛的支持，仍然在开发中扮演着重要角色。 jquery.pogo-slider是一款专门为创建滑动动画而设计的jQuery插件。它...
angular-cli配置css，js不起作用详解
weixin_33858249的博客
08-22 221
如果在index.html添加就会有效果 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ng2</title> <base href="/"> ...
angular-cli styles 全局样式引用无效
jiangshanwe
11-27 4728
开发环境 webstorm node angular angular-cli npm(cnpm) 使用angular-cli 引入全局css样式："styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css" ],发现页面没有加载任何bootstrap样式，但是npm start时没有报错，能正常
angularJS框架中循环生成的html片段jquery无法获取到节点
qq_34498048的博客
02-05 491
通过ng的定义函数和$event来获取相应的数据 data-ng-repeat="img in imgs" > ng-src="{{img}}" ng-mouseover=changeImg($event) class="img-list-img"> $scope.changeImg = function (ev) { //通过$event获取节点，得到src
angularjs结合jquery等js插件 双向绑定不生效解决办法
zl378837964的专栏
09-14 775
       前言：在使用Angularjs时候，可能还是会使用一些jQuery等插件，或者其他javascript插件。这个时候最常见的问题就是: 使用插件进行赋值后，angularjs进行的双向绑定不生效，js修改了表单值却不在model中更新 。。[一脸懵逼]。。    问题：  前段时间也遇到了使用时间插件时候对时间表单绑定数据失效的问题，并尝试多种方法解决   原因： ...
angular组件样式不生效
xixi的博客
11-19 1329
angular组件样式不生效 css .editor { background-color: #ccc; } 问题：页面没有相应的css 解决： ::ng-deep .editor { background-color: #ccc; }
网页制作便查手册,新手老手都很实用的工具 DHTML HTML CSS JavaScript 颜色表
02-06
而“不显示内容解决办法.txt”可能是针对网页制作过程中遇到的问题提供解决方案，如浏览器兼容性问题、CSS样式不生效等常见问题的解答。 总之，这个资源包为网页设计师提供了全面的学习资料，涵盖了从基础的HTML...
ngx-lightbox实现Angular5至8的Lightbox2集成
资源摘要信息:"ngx-lightbox是一个专门为Angular框架设计的Lightbox2功能实现的模块，它允许开发者在不依赖于jQuery的情况下，在Angular应用中实现图片或多媒体内容的弹出预览功能。Lightbox2是一种流行的JavaScript...
解决AngularJS UI网格列过滤不生效的难题
6. **版本兼容性问题**：如果你使用的AngularJS版本与ui-grid版本不兼容，可能会出现各种问题。查看文档或更新至兼容的版本。 **知识点四：调试与日志记录** 当以上方法都无法定位问题时，可以开启AngularJS的调试...
tailwindcss配之后不生效
最新发布
weixin_50572526的博客
01-24 5034
以上配置完成 为了方便使用在vscode里面添加一个插件，这样每次能提醒相关class类名。重点我出现了bug，配置完成没问题之后，相关的class不生效。看到了没引入的 css样式没解析，为了让他解析成功。vite.config.js里面加上。然后问题就解决拉拉~~~~~~
更改angular.json中的styles无效
weixin_44596902的博客
09-03 524
注意angular.json中有两个styles，可以搜索查看，而更改一般只在第一个生效。
jquery在angular中的引入以及使用
inprivacy的博客
07-11 517
npm install jquery --save npm install @types/jquery --save-dev 在angular.json中引入jquery.js "build":{ "options":{ "scripts":[ "node_modules/jquery/dist/jquery.min.js" ] } ...
Angular 组件样式（CSS）对于引入UI库的内容不起作用
我也很绝望啊的博客
06-16 1098
一、 问题描述 Angular组件样式文件中添加css样式不生效，但写入自定义的样式文件，然后引入反而生效 二、问题分析 Angular组件样式只作用于当前组件，如果这个组件除了模板内容外，还存在其他UI框架嵌入的组件，而这些组件不会敏感组件样式 ，为了让组件样式对这个嵌入的内容起作用，Angular使用的特殊的伪类选择器:host和:host-context选择器，这两个选择器都可以像函数一样使用 如： :host(active):{ background-color: #333 } 具体如何使用An
angular4中解决引入第三方库不起作用的问题
jiapeionline的专栏
06-29 5869
在angular4中，引入如JQuery和Bootstrap之类的库时，有时候不起作用，下面我们先来看一下一般我们会怎样做： 1、安装第三方库 npm install bootstrap --save 2、在angular_cli.json中添加："styles": [ "styles.css", "../node_modules/bootstrap/d
如何在Angular4中引入jquery
热门推荐
叮咚侠的博客
09-15 1万+
1、anjq是我的项目名称： 在anjq目录下打开dos命令窗口，然后依次执行如下命令： npm install --save jquery npm install @types/jquery --save 如图： 2、执行完命令之后，会发现配置文件package.json中会多出配置信息： "@types/jquery": "^3.2.12", "jque
Angular6引入jquery（三步解决）
好吗好的~的技术博客
11-21 1718
首先下载jquery npm install jquery --save npm install @types/jquery --save-dev   配置angular.json（注意要写在第一个出现的script中）   在所需要的组件的ts中引入jquery     这里需要注意在OnInit中加入（初学哈，刚刚解决的）  ...
Angular7样式失效问题解决方案
BXA
03-31 2201
Angular7样式失效问题解决方案前言概述小结 前言       概述       小结      
angular6学习(七)：样式设置和调用
七刀的专栏
06-20 6155
样式调用是在app.component.ts中调用app.component.css设置（外置调用）也可内置调用一:外置调用 在html文件中添加h3标签，在css文件中设置h3样式 显示如下：一:内置调用 在.ts文件中设置h3样式显示如下：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值