Webpack CSS模块和角度模板

试图用我的角度/离子项目设置webpack CSS模块。是否有可能将我的CSS模块类定义正确地附加到外部模板而不是内联模板？Webpack CSS模块和角度模板

当我硬编码我的模板到路径正常工作：

var styles = require('./css.css') 

module.exports = function(ngModule) { 

    ngModule.config(function ($stateProvider, $urlRouterProvider) { 

    $stateProvider 
     .state('tab.two', { 
     url: '/two', 
     views: { 
      'module-two': { 
      template:`<ion-view view-title="Module Two"> <ion-content class="padding moduleTwo"> <h2 class="${styles.title}">Welcome to Module Two</h2> </ion-content> </ion-view>`, 
      controller: 'TwoCtrl' 
      } 
     } 
     }) 
    }) 
}

有没有办法，虽然只是要求我的模板到

var styles = require('./css.css') 
module.exports = function(ngModule) { 

    ngModule.config(function ($stateProvider, $urlRouterProvider) { 

     $stateProvider 
       .state('tab.two', { 
        url: '/two', 
        views: { 
         'module-two': { 
          template:require('./myTemplate.html'), 
          controller: 'TwoCtrl' 
         } 
        } 
       }) 
    }) 
}

我想我可能需要设置我的webpack.config不同，但我不确定。

var webpack = require('webpack'); 
var path = require('path'); 

module.exports = { 
    entry: './index.js', 

    output: { 
    filename: 'bundle.js', 
    }, 
    module: { 
    loaders: [ 
     {test: /\.js$/, loader: "ng-annotate!babel", exclude: /node_modules/}, 
     {test: /\.html$/, loader: "raw", exclude: /node_modules/}, 
     {test: /\.json$/, loader: "json", exclude: /node_modules/}, 
     { 
     test: /\.css$/, 
     loader: "style!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]", 
     exclude: [ 
      path.resolve(__dirname, 'node_modules') 
     ] 
     }] 
    } 
};

来源

2016-08-11 Justin Young

我一直在努力解决类似的问题。简短的回答是肯定的，但可能你需要一个模板引擎，比如玉。

外部玉代码，通过它在你的代码之后：

'module-two': { 
      template() => { 
       console.log(require('./view.jade')); 
       return require('./view.jade')(styles); 
      }:, 
      controller: 'TwoCtrl' 
      }

的console.log会给你这样的事情：

function template(locals) { 
    var buf = []; 
    var jade_mixins = {}; 
    var jade_interp; 

    buf.push("<div" + (jade.cls(['text-center',"" + (locals.test) + ""], [null,true])) + ">dsadsadadas</div>");;return buf.join(""); 
    }

所以通过样式，你可以使用它的模板功能后，内部模板作为当地人。

来源

2016-08-17 09:41:39

Webpack CSS模块和角度模板

回答

相关问题