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

本文主要是在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.js，resources/sass/app.scss打包放到'public/css/app.scss。

而我们则需要编辑 resources/js/app.js和resources/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中的路径，如下图：

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

// 纯前端的小朋友直接写类似 `public/js/app.js`, `public/css/app.css`

执行打包

npm run dev

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

viencoding.com版权所有，允许转载，但转载请注明出处和原文链接: https://viencoding.com/article/129

欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O