WebPack Angular 2较小的加载程序配置

Question

我正在尝试使用较小的载荷来编译与我的Angular 2 .TS组件相关的.LESL文件，而我的寿命我无法使其正常工作。<<<<<<<<<</p>

module.exports = {
  entry: './client/main.ts',
  output: {
  path: './dist',
  filename: 'app.bundle.js'
 },
  module: {
  loaders: [
           {test: /.ts$/,
            exclude: /node_modules/,
            loader: 'ts'},
            {test: /.html$/,
            exclude: /node_modules/,
            loader: 'raw'},
            {test: /.css$/,
            exclude: /node_modules/,
            loader: 'css-loader'},
            {test: /.less$/,
            exclude: /node_modules/,
            loader: 'raw!less-loader'}
            ]
     },
     resolve: {
     extensions: ['', '.js', '.ts', '.html', '.css', '.less']
     },
     plugins: [
     new HtmlWebpackPlugin({
     template: './client/index.html'
     }),
     new webpack.DefinePlugin({
     app: {
     environment: JSON.stringify(process.env.APP_ENVIRONMENT || 
     'development')
  }

我已经通过NPM安装了"较小的负载器"。我将样式加载到组件中，如下 导入{component}来自"@angular/core";

@Component({
    selector:'welcome',
    template: require('./welcome.component.html'),
    styleUrls: require('./welcome.less')
 })
 export class WelcomeComponent{}

我的文件夹结构是

-webpack.config.js
    -client/
        -welcome/
            welcome.component.ts
            welcome.less

这是完整的错误

app.bundle.js:13838 Uncaught TypeError: stylesheet.styles.map is not a 
function
    at DirectiveNormalizer.normalizeStylesheet 
(http://localhost:3000/app.bundle.js:13838:46)
    at DirectiveNormalizer.normalizeLoadedTemplate 
(http://localhost:3000/app.bundle.js:13778:46)
    at DirectiveNormalizer.normalizeTemplateSync 
(http://localhost:3000/app.bundle.js:13763:24)
    at DirectiveNormalizer.normalizeDirective 
(http://localhost:3000/app.bundle.js:13739:46)
    at RuntimeCompiler._createCompiledTemplate 
(http://localhost:3000/app.bundle.js:17139:211)
    at http://localhost:3000/app.bundle.js:17077:44
    at Array.forEach (native)
    at http://localhost:3000/app.bundle.js:17075:51
    at Array.forEach (native)
    at RuntimeCompiler._compileComponents 
(http://localhost:3000/app.bundle.js:17074:46)

任何帮助将不胜感激，谢谢！

Answer 1

我使用以下设置

安装较少和更少的负载器：

npm install --save-dev less
npm install --save-dev less-loader

在您的webpack config(即" webpack.common.js"(中，首先需要此插件：

var ExtractTextPlugin = require('extract-text-webpack-plugin');

并添加这些规则。第一个处理应用程序之外的较少的文件，第二个处理应用程序内的文件较少：

{
    test: /.less$/,
    exclude: helpers.root('src', 'app'),
    loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader!less-loader' })
},
{
    test: /.less$/,
    include: helpers.root('src', 'app'),
    loader: 'raw-loader!less-loader'
},...

在您的主应用程序(即" app.component.ts"(中，导入您的主要文件。

import '../../assets/css/main.less';

在组件内(即" view.component.ts"(：

@Component({
    ...
    styleUrls: ['./../styles/view.component.less']
}) 

在组件中少的文件(即" view.component.ponn.less"(：

// import from node modules
@import "~bootstrap/less/variables.less";
@import "~bootstrap/less/mixins.less";
// import custom less files
@import "../../assets/css/variables.less";