これらの3つのことを一緒にするにはどうすればいいですか？webpack、less and angular 2+？

Question

私は3つの事柄を持っています：スタイルシート、ウェブパック、角度2以上のtsファイル。 まず、https://github.com/AngularClass/angular-starter/issues/165 に従ってローカル環境で正常に動作しますが、Windowsサーバーに公開するとsomeComp.component.lessファイルが動作しません。

構造：

-client app 
- - app 
- - - components 
- - - -someComponent 
- - - - -someComp.component.html 
- - - - -someComp.component.ts 
- - - - -someComp.component.less 

私someComp.component.tsで

（と、それは地元のdevの環境では正常に動作しますが、「スタイルの種類がimcompatibleている」と呼ばれるエラーを持っているスタイルで

。私はこの事を設定への方法を知らない私のwebpack.config.jsで

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'someComp', 
    templateUrl: './someComp.component.html', 
    styles: [require('./someComp.component.less')] 
}) 
export class SomeCompComponent { 
    //stuff... 
} 

。。

const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.ts', '.js', '.json', '.less', '.css', '.html'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }, 
       { 
        test: /\.less$/, 
        use: ????????????????????????????????? HOW TO CONFIG???? 
       } 
      ] 
     }, 
     plugins: [new CheckerPlugin(), new ExtractTextPlugin('??????.css') //is this even necessary??] 
    }; 

私はちょうど一緒に働く3つのものを得ることができません。これらの3つのものを一緒に働かせる方法?????私がこれらのものをWindowsサーバーに公開すると、私の少ないファイルが機能しなくなりました。どうやって？？？？それらの仕事を得る方法??????

Answer 1

webpack + angular 2+ lessは私に多くの頭痛を与えます。開発者は実際にはこれらを連携させるためのより良い構造に値するはずですが、この恐ろしいwebpack.config.jsで2日を費やすことはありません。

とにかく。

私はあなたがこの

が私component.tsで、その後

私おかしくwebpack.config.js

で、その後

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'someComp', 
    templateUrl: './someComp.component.html', 
    styleUrls: ['./someComp.component.less'] <---here 
}) 
export class someCompComponent { 

} 

をWebPACKの

npm install --save-dev less-loader less 

にはあまりローダーをインストール行うことができます考え出しました

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { 
      extensions: ['.ts', '.js', '.json', '.less', '.css', '.html'] <-----!!!!!!here 
     }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }, 
       { 
        test: /\.less$/,   <-----!!!!!!here 
        exclude: /node_modules/, <-----!!!!!!here 
        loader: 'raw-loader!less-loader' <-----!!!!!!here 
       } 
      ] 
     }, 
     plugins: [...] 
    }; 

これは、本番環境と開発環境の両方でうまく動作します。