Webpack Angular 2 less-loaderの設定

Question

Angular 2 .tsコンポーネントに関連付けられた.lessファイルをコンパイルするためにless-loaderを使用しようとしています。私の人生の間、正しく動作するようにはできません。

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で「less-loader」をインストールしました。コンポーネントのスタイルを次のようにロードします。 {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

私は次のセットアップ

少なくなり、ローダーのインストールに使用：

：最初にこのプラグインを必要とし、あなたのWebPACKの設定（つまり "webpack.common.js"）では

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

を

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

これらのルールを追加します。最初のものは、第二は、アプリ内の以下のファイルを処理し、アプリの外に少ないファイルを処理します。あなたのメインアプリ（すなわち「app.component.ts」）では

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

、あなたのメインの少ないファイルをインポートします。

成分（すなわち "view.component.ts"）の内部

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

：

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

コンポーネント内以下ファイル（すなわち "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";