在VS2017 Angular 5项目中使用较少的样式表

Question

我相信它应该比看起来容易。我是WebPack的新手，我花了几个小时尝试找出我缺少的东西。

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

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

但是，一旦添加了较小载荷的非常基本的规则，例如{ test: /.less$/, use: 'less-loader' }（我尝试过此规则的多种变体），我总是会在我的较少样式表中遇到错误You may need an appropriate loader to handle this file type。真的吗？我正在提供装载机，还需要什么？

我正在尝试在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__...

Answer 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'
         }
     }]
}

在这里陷入困境：

1. 尝试在客户端捆绑配置中使用它，我得到了"您可能需要一个适当的加载程序来处理此文件类型"
2. 尝试使用它而没有后备选项，我在预先登录上没有定义窗口
3. 您需要所有三个装载机，否则也不起作用
4. 我认为，降级会按预期工作，但是尚未进行测试。