在 VS2017 Angular 5 项目中使用 LESS 样式表答案

【问题标题】：Use LESS stylesheets in VS2017 Angular 5 project在 VS2017 Angular 5 项目中使用 LESS 样式表
【发布时间】：2017-12-25 10:26:16
【问题描述】：

我相信它应该比看起来更容易。我是 webpack 的新手，我花了几个小时试图弄清楚我缺少什么。

我需要的只是将 LESS 预处理器添加到 webpack.config.js。 CSS 规则已经存在并且有效：

module: {
        rules: [
            { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }
        ]
    }

但是一旦为 less-loader 添加了非常基本的规则，例如 { test: /\.less$/, use: 'less-loader' }（我已经尝试了该规则的多种变体），我的 LESS 样式表上总是会出现错误 You may need an appropriate loader to handle this file type。真的吗？我提供了loader，还需要什么？

我正在尝试在 Angular 组件中使用我的样式表，如下所示：

@Component({
    styles: [require('./my.component.less')]
})

确切的错误：

NodeInvocationException: Prerendering failed because of error: Error: Module 
parse failed: Unexpected token (1:1)
You may need an appropriate loader to handle this file type.
// few lines of my styleshhet, so it was indeed located properly
// call stack ... at Object.module.exports ... at __webpack_require__...

【问题讨论】：

标签： angular webpack less-loader

【解决方案1】：

最后，我让它完全正常工作了。花了几个小时，我还没有在一个地方找到所有东西，所以我在这里发布完整的答案。

TL;DR 这是webpack.config.js 中的工作配置，在sharedConfig.module.rules 集合中使用它：

{
    test: /\.less$/, use: [
    { loader: "to-string-loader" },
    { loader: isDevBuild ? 'css-loader' : 'css-loader?minimize' },
    {
         loader: "less-loader",
         options: {
             fallback: isDevBuild ? 'css-loader' : 'css-loader?minimize'
         }
     }]
}

这里有问题：

尝试在客户端捆绑配置中使用它时，我在预渲染时收到“您可能需要适当的加载程序来处理此文件类型”
尝试在不使用回退选项的情况下使用它，但在预渲染时出现“未定义窗口”
您需要将所有三个加载程序都排成一行，否则也不起作用
我相信缩小会按预期工作，但尚未测试。

【讨论】：