AngularJS和較少進口

我有一個角度js項目。我使用Grunt來編譯js和css（對於我使用較少的css）。在這一刻我創建一個文件的CSS與所有風格和主題。我有一個風格的文件夾（主題a.less，主題b.less等）。AngularJS和較少進口

我的問題是：如何在用戶按下按鈕時更改動態主題？我認爲我需要改變進口，但我不知道如何。

感謝

來源

2015-10-09 Davide

:)嘗試這種配置的呼嚕聲， http://ericnish.io/blog/compile-less-files-with-grunt

來源

2015-10-09 12:46:47 Sebastian

這聽起來不錯，但我已編譯的文件與咕嚕之前，我有一個CSS與所有風格和ONE主題。所以也許我不需要編譯theme-a.css和theme-b.css並單獨使用它？ – Davide

當然！

看看這個！

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">

來源

2015-10-09 12:47:28 petur

這聽起來不錯，但我已經編譯了文件之前與咕嚕聲，我有一個所有風格和一個主題的CSS。所以也許我不需要編譯theme-a.css和theme-b.css並單獨使用它？ – Davide

看看這個：

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

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' } 
 
    ]; 
 

 
});

<!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>

來源

2015-10-09 12:51:10

這聽起來不錯，但我已經編譯文件與咕嚕聲，我有一個與所有風格和一個主題的CSS。所以也許我不需要編譯theme-a.css和theme-b.css並單獨使用它？ – Davide

AngularJS和較少進口

回答

相關問題