Webpack Angular 2 less-loader config

Question

我正在嘗試使用less-loader來編譯與我的Angular 2 .ts組件相關的.less文件，並且對於我的生活我無法讓它正常工作。

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 '少裝載機'。我將我的樣式加載到我的組件中，如下所示 從「@ angular/core」導入{Component};

@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配置（即 「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.less」）：

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