![](/img/trans.png)
[英]Ionic - How to Import scss or css file from node_modules?
[英]Ionic3 : the best way to import css from node_modules
我想从全日历包中导入.css。
首先,我创建了一个新组件my-calendar (html,scss,ts)。
然后,我尝试了3种不同的方式,但只有最后一种方式适合我:
如文档所示,在index.html中直接引用该文件(它不起作用,因为在构建项目时对node_modules的引用会丢失)
<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
添加@import "~fullcalendar/dist/fullcalendar.min.css";
在my-calendar.scss中 。 如果我没有错,这应该在构建项目时将样式添加到main.css中 (不起作用)
创建自定义副本配置(copy.config.js)
module.exports = { ... copyFullCalendar: { src: ['{{ROOT}}/node_modules/fullcalendar/dist/fullcalendar.min.css'], dest: '{{BUILD}}' } }
并添加@import "fullcalendar.min.css"
; 进入my-calendar.scss
更新:
并添加@import "fullcalendar";
进入my-calendar.scss
使用离子构建时避免编译器错误--aot --minifycss --minifyjs
如果有人能澄清最好的方法并解释我是否误解了某些概念,我将不胜感激。
PS:请记住我正在使用Ionic3而我没有使用Angular CLI。
你的第三种方法将是最好的实现方式,但它可以用更像离子的另一种方式完成。 你需要利用的includePaths
配置自定义路径时,因为我们面对的是自定义的CSS,添加sass.config.js
到本地项目文件夹中,我们配置自定义的includepaths这样
includePaths: [
....
'node_modules/ap-angular2-fullcalendar'
],
在package.json
脚本中包含自定义css配置文件,如下所示:
"scripts": {
.....
"ionic:serve": "ionic-app-scripts serve -s ./config/sass.config.js"
},
此实现的唯一问题是当您更新ionic-app-scripts
您必须将本机sass.config.js
文件与本地文件进行比较,并检查是否有任何更改。
这是一个麻烦的方法,并且在Github中提出了一个问题但不幸的是他们以下列理由结束了这个问题
配置已扩展,因此仅包括您正在更改的字段。 其他所有内容都将继承默认值。
从@ ionic / app-scripts:3.2.0开始,你似乎还需要@include FILE;
某处 在应用程序脚本的github上看到这个已关闭的问题
我发现,从“Ionic Framework:ionic-angular 3.9.2”开始,您有两个选择在src / theme / variables.scss或src / app / app.scss中插入导入。
例如,在variables.scss中
/* some declarations here */
@import 'insrctest';/*file sits in src/test/insrctest.scss*/
在我的custom.config.js中
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'./src/test', /* when the import above gets called, node-sass will look in here */
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.