css - Webpack CSS 模块和 Angular 模板

Question

尝试使用我的 angular/ionic 元素设置 webpack CSS 模块。是否可以将我的 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')
        ]
      }]
  }
};

Answer 1

我一直在为类似的问题而苦苦挣扎。简短的回答是肯定的，但您可能需要一个模板引擎，例如 jade。

外部 jade 代码，将其传入您的代码后:

'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("");
    }

所以在将样式传递给模板函数后，您可以在模板中将其作为局部变量使用。