Question

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

我需要的是将{LESS预处理器添加到cell.tag = indexpath.row。 CSS的规则已经存在并且有效：

webpack.config.js

但是一旦为less-loader添加了非常基本的规则，比如module: { rules: [ { test: /\.css$/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] } ] }（我已尝试过这个规则的多种变体），我总是在LESS样式表上得到错误{ test: /\.less$/, use: 'less-loader' }。真？我正在提供装载机，它还需要什么？

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

You may need an appropriate loader to handle this file type

确切错误：

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

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

陷入困境：

尝试在客户端捆绑配置中使用它，我得到“你可能需要一个适当的加载器来处理这个文件类型”预渲染
尝试使用它而没有后备选项，我在预呈现
你需要排队的所有三个装载机，否则也不起作用
我认为缩小将按预期工作，但尚未测试。

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

1 个答案: