Question

我正在尝试从full-calendar包中导入.css。

首先，我创建了一个新组件 my-calendar （html，scss，ts）。

然后，我尝试了3种不同的方式，但只有最后一种方式适合我：

如文档所示，直接在 index.html 中引用该文件（它不起作用，因为在构建项目时对node_modules的引用会丢失）

<link href="node_modules/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet">
在 my-calendar.scss 中添加@import "~fullcalendar/dist/fullcalendar.min.css";。如果我没有错，那么在构建项目时（不工作）应该将样式添加到 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。

Answer 1

你的第三种方法将是最好的实施方式，但它可以用更像离子的另一种方式完成。在配置自定义路径时，您需要使用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中提出了一个问题，但遗憾的是他们通过以下理由解决了这个问题

配置已扩展，因此仅包括您正在更改的字段。其他所有内容都将继承默认值。

Answer 2

从@ ionic / app-scripts开始：3.2.0，看来您仍然需要 @include FILE; 某处看到这个closed issue on app script's github

我发现截至离子框架：离子角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 */

Ionic3：从node_modules导入css的最佳方法

2 个答案: