Webpack CSS 模块和角度模板答案

【问题标题】：Webpack CSS modules and angular templatesWebpack CSS 模块和角度模板
【发布时间】：2016-12-18 15:26:33
【问题描述】：

尝试使用我的 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')
        ]
      }]
  }
};

【问题讨论】：

标签： css angularjs webpack

【解决方案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("");
    }

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

【讨论】：