MEAN.js使用配置文件进行css文件管理;它还为模块自动加载所有css文件。
问题#1: 如何从列表中排除特定文件?
问题2:什么是仅为某些页面(部分)包含特定CSS文件的正确方法?
问题3:如何按特定顺序包含CSS文件?现在我使用数字前缀作为文件名,例如。 1_file.css,2_file.css等
答案 0 :(得分:11)
在路径中使用感叹号排除缩小的应用程序css中包含的特定文件。您可以根据需要向Line 10 of gruntfile.js中的clientCSS数组添加任意数量的文件。它看起来像这样:
clientCSS: ['public/modules/**/*.css', '!path/to/file.css'],
当我找到Angular Route Styles回购时,我正在使用选项2。如果第一个选项对你不起作用,那么我将完成第二个选项
您必须将“ng-app”添加到layout.server.view.html
文件中的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
}]);
您可以自行进行一些自定义修改,以通过获取当前路由并动态选择要拉出的文件或使用案例切换来加载特定的css文件。这可能是其中任何一个的开始。
看起来css文件从Line 78 by the grunt task cssmin开始通过applicationCSSFiles连接到“application.min.css”,applicationCSSFiles通过Line 73 in the config.js file.填充并可在config / express.js中访问。
在每个模块的css文件夹中创建一个名为“overrides”的文件夹。将所有特定于页面的css包含在名为“override.css”的文件中
在config / express.js内添加:
app.locals.cssOverrides = config.getCSSOverrides();
在env / config / all.js中,在"css" block on Line 28
之后添加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 %}
您已经使用的一致命名约定是手动将文件名添加到数组中的下一个最佳选择。