npm安装的包如何引入css, js

2019-03-19 05:04:08   前端

本文主要是在laravel框架中引入npm安装的资源的,不知道laravel,纯前端的小伙伴也不要慌,都是一样的

laravel用的mix,默认的mix文件是根目录下的 webpack.mix.js 默认有这么两行定义:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

这两行的意思是当我们执行 npm run dev,npm run production,npm run watch, 等操作的时候,将resources/js/app.js打包然后放到public/js/app.jsresources/sass/app.scss打包放到'public/css/app.scss

而我们则需要编辑 resources/js/app.jsresources/sass/app.scss去引入并使用,或者你在 webpack.mix.js 中重新定义你自己的js和css文件路径,并且指定打包后在public下的目录。这里我们就以默认的js和css文件为例。

示例:simplemde的安装引入与使用

安装

npm install simplemde --save

resources/js/app.js中引入simplemde并且使用,在底部添加

window.SimpleMDE = require('simplemde'); //引入
var markdown = new SimpleMDE(); //使用

resources/sass/app.scss 中引入css样式,底部添加

@import "~simplemde/dist/simplemde.min.css";

解释一下:~代表你的node_modules根目录,不过不用加/ ,后面直接跟包名就行,然后后面的路径就是在simplemde中的路径,如下图:

simplemde node modules

ok,最后我们需要在页面代码中引入,打包后在public下的文件

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" defer></script>
// 纯前端的小朋友直接写类似 `public/js/app.js`,  `public/css/app.css`

执行打包

npm run dev

大功告成,以上就是laravel中引入npm安装的js或者css的全部教程。

viencoding.com版权所有,允许转载,但转载请注明出处和原文链接: https://viencoding.com/article/129
欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

猜你喜欢


评论

There are no comments yet.
未登录

登录后即可发表评论

登录或注册

标签

AdSense Anaconda Android API apt Auth AWS B-tree Bandwagon Blog bower brew bytes Caffe Catalina cloudcone Composer conda CoreML CPU crontab CSS csv Cuda cv2 datetime Digitalocean DNS Docker Docker-Compose Eloquent Excel export Flask FTP GET Git GitHub GitLab Gmail GoDaddy Google GTM hash Homebrew Homestead HTML http HTTPS IDEA image imagemagick imagick imgick import InnoDB ios iou iPhone ISO8601 iTerm2 Java JPG Keras Laravel Laravel-Admin lazyload Linux list lnmp load logs Lravel Mac Markdown matplotlib md5 mix MobileNet Mojave mongo MongoDB MySQL Namesilo Nginx Node npm numpy Nvidia Nvidia-Docker onevps OpenCV Openpose openpyxl Outline parse PayPal PHP php-fpm PhpStorm PHP扩展 PIL Pillow pip PNG POST Protobuf PyCharm pyenv pymongo Python Python,人工智能,机器学习,VOC,xml Queue Redis requests RGB Sanctum save selenium SEO Shadowsock Shadowsocks ShadowsocksR simplemde Spring Boot SQLServer ssd SSH SSL证书 SSR str Sublime sudo swap Swift Tensorflow TensorflowLite Terminal Terminator Ubuntu urllib UTC v2ray Valet Validation Validator VienBlog virtualenvs VPN VPS Vultr Web Windows WordPress Xcode xlsx yaml YAPI YUV zip zmq zsh 下载图片 主从同步 云主机 云服务器 人工智能 优化 优惠码 伪原创 作弊与反作弊 免费ss账号 免费提现 切片 前端 加密 协议 博客 友链 双击事件 后台运行 后端 命令 国内镜像源 图片操作 图片转换 域名 多身份认证 大小写转换 姿态检测 安卓模拟器 安装 定时任务 定时执行 密码 密钥 导出导入 小程序码 延迟加载 微信 微信小程序 慢查询 懒加载 提现 搜索引擎 搬瓦工 搭梯子 教程 数据库 数据重复 文件上传 无法登录 日志 日期 时区 时间 时间戳 服务器 机器学习 权限 梯子 模拟浏览器 港版支付宝 爬虫 生活服务 用户管理 登录 目标检测 科学上网 系统升级 索引 组件开发 编辑器 自动付款 英文伪原创 计划任务 计算机视觉 认证 语法 读写分离 远程连接 配置文件 重定向 错误异常 错误提示 队列 阿里云 香港 香港手机号
亲情非友情链接