在 WebPack 中加载样式

Question

有没有办法尝试为每个 加载 xx.less xx.js 正在加载？

现在，我们在每个相关的 js 文件的顶部添加 require 'xx.less'，它有点难看。

Answer 1

我最后做的是改进 imports loader 以添加一个选项，以便为每个 jsx 具有相同名称的文件（如果存在）导入一个 less 文件。

我改进的import loader：https://github.com/welldone-software/imports-loader

拉取请求：https://github.com/webpack/imports-loader/pull/12

例如，将 mainview.less 放入与 mainview.jsx 相同的目录中，会在 jsx 文件的顶部添加一个 require("mainview.less") 导入：

loaders: [
    { test: /\.jsx?$/, loaders: ['imports?null=[./{name}.less]', 'react-hot', 'babel'] },
    { test: /\.less$/, loader: 'style!css!less' }
]

在 WebPack 中加载样式

Load Styles in WebPack

less

reactjs

webpack

webpack-dev-server

webpack-style-loader