如何让这三样东西协同工作：webpack、less 和 angular 2+？

Question

所以我有 3 个东西：更少的样式表、webpack 和 angular2+ 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 中（在样式中它有一个名为 "the type of styles are incompatible" 的错误，尽管在本地开发环境中它工作正常。

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??]
    };

我就是无法让这三件事一起工作。如何让这三件事一起工作？？？？？如果我将这些东西发布到 windows 服务器上，我的 less 文件就会停止工作。如何？？？？如何获得这些工作？？？？？

Answer 1

webpack + angular 2 + less 让我很头疼。开发人员确实应该得到一些更好的结构来让它们一起工作，但不要花 2 天时间在谷歌上搜索和调整这个该死的 webpack.config.js

无论如何。

我觉得你可以做到这一点

为 webpack 安装 less loader

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

好吧，这在生产环境和开发环境中都适用。

如何让这三样东西协同工作：webpack、less 和 angular 2+？

how to get those 3 things working together: webpack, less and angular 2+?

less

webpack

angular