如何让这3件事情一起工作：webpack，less和angular 2+？

Question

所以我有3件事：在ts文件中减少样式表，webpack和angular 2+。 首先我根据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

（和风格也有所谓的“风格类型都是不亲”，虽然在本地开发环境中正常工作的错误

。

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

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

在我webpack.config.js。我不知道如何配置这件事情。

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件事情一起工作?????如果我将这些内容发布到Windows服务器上，我的文件就会停止工作。怎么样？？？？如何获得这些工作??????

Answer 1

webpack + angular 2 + less给了我很多头痛。开发商应该真的值得一些更好的结构，这些一起工作，但不花2天的时间在谷歌搜索和调整这个怪胎webpack.config.js

无论如何。

我想通了，你可以这样做

安装较少装载机的WebPack

npm install --save-dev less-loader less 

然后在我component.ts

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

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

} 

然后我再用webpack.config.js

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: [...] 
    }; 

，这对于生产和开发环境都有效。