如何在运行时自动引入 normalize.css 文件

html-css016

如何在运行时自动引入 normalize.css 文件,第1张

传统的方式是直接引入 .css 文件,如:<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />,但是我现在想让 Angular 通过 import 模块的方式自动为 index.html 引入 normalize.css 样式表。

我先是按照之前引入 Material 2 的方式:

// angular-cli-build.js

module.exports = function(defaults) {

return new Angular2App(defaults, {

vendorNpmFiles: [

'normalize-path/index.js',

]

})

}

// system-config.ts

const map: any = {

'normalize': 'vendor/normalize-path',

}

/** User packages configuration. */

const packages: any = {

'normalize': {main: 'index.js'},

}

// app.component.ts

import { normalize } from 'normalize-path'

这时编辑器会提示:

Cannot find module 'normalize-path'.

并且编译也不通过,也许我的出发点是错的。

最近在用nodejs写一点东西,当然也用到了express框架和ejs模版了。在使用ejs模版的过程中遇到了这个问题:如何在ejs模版中导入外部的js、css文件。

我猜测,ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。按照之前在html文件中的方式导入,结果失败。

这也证明我之前的想法,这些静态文件一经过服务器,就不能直接进行导入了。那该如何导入呢?

这是我的文件结构:

我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。

我为什么要将两个静态文件放到public文件夹下呢?

大家应该都知道,在使用express框架时,在安装了express模块之后,在该项目下的命令行输入express -e 就会自动生成相应的文件目录。当然,上面的截图中的目录是我自己写的,下面是express自动生成的目录:

可以看到,其中的public文件夹是其自动生成的,也就是让你放静态文件的文件夹。(当然也不是必须是“public”)