Webpack Angular 2 less-loader config

Question

Ich versuche, less-loader zu verwenden, um die .less-Dateien zu kompilieren, die meinen Angular 2 .ts-Komponenten zugeordnet sind, und für das Leben von mir kann ich nicht richtig funktionieren.

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') 
    } 

Ich habe 'less-loader' über npm installiert. Ich lade meine Stile in meinen Komponenten wie folgt importieren Sie {Component} von "@ angular/core";

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

Meine Ordnerstruktur ist

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

Hier wird der vollständige Fehler würde sehr geschätzt

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) 

Jede Hilfe ist, danke!

Answer 1

habe ich die folgende Einstellung

Installieren weniger Lader:

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

In Ihrem webpack config (dh "webpack.common.js"), zuerst dieses Plugin erforderlich:

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

Und fügen Sie diese Regeln hinzu. Die ersten Griffe weniger Dateien außerhalb der App, die zweiten weniger Dateien in dem App Griffen:

{ 
    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' 
},... 

In Ihrer Hauptanwendung (das heißt „app.component.ts“), Haupt weniger Datei importieren.

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

Innerhalb einer Komponente (d.h. "view.component.ts"):

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

innerhalb der Komponente weniger Datei (das heißt "view.component.less"):

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