项目中如何引用 node_modules 中的 CSS 文件

问答 / 2608 / 1 / 创建于 5年前

我使用下面的命令安装了switchery扩展

npm install switchery

安装完成后，node_modules目录下也有相应的扩展。现在纠结的是，我如何才能在页面中运行它。
目录结构是这样的：

node_modules/
    switchery/
        examples/
        standalone/
        switchery.css
        switchery.js
        ...

我使用了mix的文件打包工具，希望把所有的css和js分别打包到一起。
下面是我的mix的配置

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

// 合并js css
mix.scripts([
    'public/js/base/app.js',
    // 'resources/js/honeySwitch.js',
    'public/js/base/main.js',
], 'public/js/all.js')
    .styles([
        'public/css/base/app.css',
        // 'resources/css/honeySwitch.css',
        'public/css/base/main.css',
        'public/css/base/style.css',
    ], 'public/css/all.css');

问题来了：
关于js的文件，我放在app.js引入了，引入的方式如下[js引入应该是可以的]

require('switchery');

但是现在的问题是，css文件我还该如何引入呢？

前端样式引入 laravel node_modules 静态资源

106 声望

博观而约取厚积而薄发

《L04 微信小程序从零到发布》

从小程序个人账户申请开始，带你一步步进行开发一个微信小程序，直到提交微信控制台上线发布。

《G01 Go 实战入门》

从零开始带你一步步开发一个 Go 博客项目，让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。

推荐文章：

更多推荐...

PHP 中一次反射需要多长时间 17 / 5 |

Laravel 11 中文文档仓库，已翻译完成！！！ 16 / 29 |

Laravel验证器最完整用法实例 31 / 14 |

PHP Annotated——2023 年 12 月 25 / 2 |

使用 Laravel 10 & Vue 3 开发了一个社区站，一起来玩下～ 17 / 41 |

历时一个月，《穿透Laravel》全书完成！ 90 / 25 |

讨论数量: 1

houxin

106 声望

1、引入switchery.js
目录：/resources/js/app.js
代码：

require('./bootstrap');

// 引入switchery弹出框
window.Switchery = require('switchery');

window.Vue = require('vue');

2、引入switchery的css
目录：/resources/sass/app.scss
代码：

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// 引入switchery中的弹窗提示
@import '~switchery/switchery';

.navbar-laravel {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

欢迎来喷

5年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助