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中（并且它的样式有一个名为＆＃34的错误;样式类型不兼容＆＃34;虽然在本地开发环境中它可以正常工作。

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

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

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

1 个答案: