0

我相信它应该比看起来更容易。我是 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' }（我已经尝试了这个规则的许多变体），我总是You may need an appropriate loader to handle this file type在我的 LESS 样式表上得到一个错误。真的吗？我正在提供装载机，它还需要什么？

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

1 回答 1

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. 我相信缩小会按预期工作，但尚未测试。
于 2017-12-25T12:31:06.937 回答