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

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

Laravel 前端 npm

本文主要是在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中的路径，如下图：

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的全部教程。

欢迎小伙伴们在下方评论区留言 ~ O(∩_∩)O
文章对我有帮助, 点此请博主吃包辣条 ~ O(∩_∩)O

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

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

猜你喜欢

评论

未登录

标签