Question

我有一个角度js项目。我使用Grunt来编译js和css（对于css我使用更少）。此刻我创建了一个具有所有样式和主题的文件css。我有一个带有一些风格的文件夹（theme-a.less，theme-b.less等）。

我的问题是：当用户按下按钮时，如何更改动态主题？我认为我需要更改导入，但我不知道如何。

由于

FS

Answer 1

:)为grunt尝试这个配置， http://ericnish.io/blog/compile-less-files-with-grunt

Answer 2

当然！

看看这个！

https://scotch.io/tutorials/use-angularjs-and-nghref-to-grab-css-dynamically

基本上，使用ng-href并将整个html设置为“主题”控制器。

示例：

<link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/{{ css }}/bootstrap.min.css">

Answer 3

看看这个：

字体：https://scotch.io/tutorials/use-angularjs-and-nghref-to-grab-css-dynamically

＆＃13;

angular.module('linkApp', [])

.controller('mainController', function($scope) {
  
  $scope.css = 'cosmo';
   
  $scope.bootstraps = [
    { name: 'Basic', url: 'cosmo' },
    { name: 'Slate', url: 'slate' },
    { name: 'Sandstone', url: 'sandstone' }
  ];
  
  $scope.layout = 'normal';
  
  $scope.layouts = [
    { name: 'Boring', url: 'normal' },
    { name: 'Circles', url: 'circle' },
    { name: 'In Your Face', url: 'large' }
  ];

});

＆＃13;

<!DOCTYPE html>

<!-- define our app and controller on html -->
<html ng-app="linkApp" ng-controller="mainController">

<head>

    <!-- pull in css based on angular -->
    <link rel="stylesheet" ng-href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/{{ css }}/bootstrap.min.css">
    <link rel="stylesheet" ng-href="layout-{{ layout }}.css">
    <style>
        body {
            padding-top: 50px;
        }
    </style>

    <!-- bring in JS and angular -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
    <script src="app.js"></script>
</head>

<body class="container">

    <!-- section to select styles -->
    <div class="well">
        <form>
            <div class="form-group">
                <label>Theme</label>
                <select class="form-control" ng-model="css" ng-options="bootstrap.url as bootstrap.name for bootstrap in bootstraps">
                </select>
            </div>
            <div class="form-group">
                <label>Layout</label>
                <select class="form-control" ng-model="layout" ng-options="layout.url as layout.name for layout in layouts"></select>
            </div>
        </form>
    </div>

    <hr>

    <!-- our content -->
    <div class="picture-thing">
        <div class="picture-thing-img">
            <img src="http://scotch.io/wp-content/uploads/2014/10/picture-picture.jpg">
        </div>
        <div class="picture-thing-content">
            <h2>Bananas</h2>
            <p>This demo is just that.</p>
        </div>
    </div>
    

</body>

</html>

＆＃13;

AngularJS和Less import

3 个答案: