如何在MEAN.js&Node.js中pipe理资产(css)
MEAN.js使用configuration文件进行css文件pipe理; 它也自动加载所有的模块的CSS文件。
问题1:如何从列表中排除特定的文件?
问题2:什么是正确的方式来包含特定的CSS文件只有一些页面(partials)?
问题3:如何按特定顺序包含CSS文件? 现在我用一个数字前缀作为文件名,例如。 1_file.css,2_file.css等
问题1:如何从列表中排除特定的文件?
在path中使用感叹号来排除缩小应用程序css中包含的特定文件。 您可以添加任意数量的文件到gruntfile.js的第10行中的clientCSS数组。 它看起来像这样:
clientCSS: ['public/modules/**/*.css', '!path/to/file.css'],
问题2:什么是正确的方式来包含特定的CSS文件只有一些页面(partials)?
选项1
当我findAngular Route Styles回购的时候,我正在使用Option 2。 如果这第一个选项不适合你,那么我将完成第二个选项
您必须在layout.server.view.html
文件中添加“ng-app”到您的html标记以及对route-styles.js
的脚本引用。 在public / config.js文件中添加ngRoute
和routeStyles
作为依赖关系。
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngRoute','routeStyles', 'ui.router', 'ui.bootstrap', 'ui.utils'];
然后添加你的页面特定的样式到$ routeProvider。
var app = angular.module('myApp', []); app.config(['$routeProvider', function($routeProvider){ $routeProvider .when('/some/route/1', { templateUrl: 'partials/partial1.html', controller: 'Partial1Ctrl', css: 'css/partial1.css' }) .when('/some/route/2', { templateUrl: 'partials/partial2.html', controller: 'Partial2Ctrl' }) .when('/some/route/3', { templateUrl: 'partials/partial3.html', controller: 'Partial3Ctrl', css: ['css/partial3_1.css','css/partial3_2.css'] }) // more routes can be declared here }]);
选项2
你可以自己做一些自定义的修改来加载特定的css文件,或者通过获取当前路由并dynamicselect要拖动哪个文件或者使用case switch。 这可能是两者的开始。
它看起来像css文件连接到第78行开始的“application.min.css” 由grunt任务cssmin通过在config.js文件中通过行73填充的applicationCSSFiles 。 并可以在config / express.js中访问。
在每个模块的css文件夹内创build一个名为“overrides”的文件夹。 将所有页面特定的css包含在名为“override.css”的文件中
在config / express.js里面添加:
app.locals.cssOverrides = config.getCSSOverrides();
在env / config / all.js里面, 在第28行的“css”块之后加上这个
overrides: [ 'public/modules/**/css/overrides/*.css' ],
在config / config.js里面添加这个到文件的底部:
module.exports.getCSSOverrides = function() { var output = this.getGlobbedFiles(this.assets.overrides, 'public/'); return output; };
最后,要拉取每个override.css文件,请将以下内容添加到app / views / layout.server.view.html
{% for cssOverrideFile in cssOverrides %}<link rel="stylesheet" href="{{cssOverrideFile}}"> {% endfor %}
问题3:如何按特定顺序包含CSS文件? 现在我用一个数字前缀作为文件名,例如。 1_file.css,2_file.css等
像你已经使用的一致的命名约定是手动添加文件名到数组的下一个最好的事情。