正文
nodejscss样式,nodejs css
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
node.js中怎么加载css
nodejs本身只能加载js，css文件只能做为文本被读取。
如果想要加载解析css，可以配合webpack，然后使用css-loader、style-loader来使用。
css-loader是用来加载解析css的，将其处理成对象，方便js进一步处理；
style-loader可以将css-loader处理的对象导入到html中，从而可以在网页中运行。
相关问答
Q1: 如何在某个页面用nodejs技术
一个网页的内容其实就是一段字符串，response.write()可以接受一个字符串作为参数，所以很明显只需要把一个网页的内容作为参数传递给response.write()即可。例如:
[javascript] view plain copy
span style="white-space:pre" /spanvar http = require('http');
http.createServer(function(req, res){
var html = 'html'
+'head'
+'titlenodejs/title'
+'/head'
+'body'
+ 'hello world! 1234'
+'/body'
+'/html';
res.writeHead(200,{'Content-Type' : 'text/html'});
res.write(html);
res.end();
}).listen(8888);
在浏览器地址栏输入127.0.0.1:8888查看结果，打开控制台，可以发现网页的类容已经全部包含在浏览器中。
一个网页一般会包含css样式文件和javascript脚本文件，再上一个示例中没有这两个文件。现在可以添加简单的css和javascript文件查看效果：
[javascript] view plain copy
span style="white-space:pre" /spanvar http = require('http');
http.createServer(function(req, res){
var html = 'html'
+'head'
+'titlenodejs/title'
+'link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" /'
+'script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"/script'
+'/head'
+'body'
+ 'hello world!hello world! 1234'
+'/body'
+'/html';
res.writeHead(200,{'Content-Type' : 'text/html'});
res.write(html);
res.end();
}).listen(8888);
会发现css文件和javascript文件都没有被正确下载。这是因为这段代码中规定的'Content-Type'都是'text/html'类型，而且所有的response内容都相同，当然就看不到想要的效果。
我们知道css样式和javascript脚本有多种不同的引入方法，css样式可以使用外联样式、内部样式和内联样式，javascript可以使用外联和内部两种，既然外联不能正确显示，那么可以尝试其他方法。通过测试可以发现css内部样式和内联样式都可以在网页上看到效果，javascript同样。
[javascript] view plain copy
span style="white-space:pre" /spanvar http = require('http');
http.createServer(function(req, res){
var html = 'html'
+'head'
+'titlenodejs/title'
+'style type="text/css"'
+'body{color:red;}'
+'/style'
+'/head'
+'body'
+ 'hello world! 1234'
+'/body'
+'/html';
res.writeHead(200,{'Content-Type' : 'text/html'});
res.write(html);
res.end();
}).listen(8888);
可以看到浏览器中的文字显示为红色。
但是这两种方式都不是现代web开发所提倡的。现代web开发提倡css样式和javascript使用外联的方式，以方便管理和重用。css文件和javascript文件都是静态文件，我们可以尝试建立一个简单的静态文件服务，这样就可以正确的在网页中使用外联文件了。
Q2: nodejs 怎么引入css文件
define(["require"], function(require) {
var cssUrl = require.toUrl("./style.css");
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = cssUrl;
document.getElementsByTagName("head")[0].appendChild(link);
});
require有个text组件的.引用组件后.define中只要text!css/style.css就可以引用引用css文件就可以了.也可以引用html模板文件
Q3: 把JS和CSS样式表的代码以文件的方式引入别人还能带到这部分的代码吗？
如果是想闭源，不想让别人得到你的源代码，是可以的，通过代码混淆、压缩等方式，如果会用NodeJS做开发那就更加方便可以用Gulp/Grunt实现自动构建，还有Webpack、Browserify等打包工具把代码打包起来。保证别人没法读你的JS和全局CSS代码。
但是不论通过哪种方式，在浏览器上都可以使用开发人员工具查看到最终生成的HTML和局部的CSS样式。
Q4: 为什么用nodejs引用的样式都没有起作用
网页编码如果用的是utf-8的话，那么在css样式表文件中，如果有中文注释，或是font-family使用中文，那么在网页调用的时候会出现该样式无效的情况 不过在页面中直接写css就没有这种问题！
