无法使用 webpack 将 LESS 加载到页面中

Question

我似乎无法使用 webpack

将 LESS 加载到我的页面中

这是我的 webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: './public/js',
        filename: 'main.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [
            { test: /\.json$/, loader: 'json-loader' },
            { test: /\.jsx$/, loader: 'jsx-loader' },
            { test: /\.es6$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?stage=0&optional=runtime'},
            { test: /\.less$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") }
        ],
        plugins: [
            new ExtractTextPlugin('style.css', {
                allChunks: true
            })
        ]
    }
};

我的 app/index.js 包含：

'use strict';

let stylesheet = require('./styles/index.less');
let routes = require('./routes.js');
let Router = require('react-router');
let { Handler } = Router;

Router.run(routes, Router.HistoryLocation, function(root, state) {
    React.render(<Handler query={ state } path={ state.pathname }/>, document.getElementById('app'))
});

var stylesheet 应该取所有 buttons.less 因为它包含 @import "buttons.less";

这是我要加载的 reactjs 组件：

var React = require('react');
var { RouteHandler } = require('react-router');

var UserMenu = React.createClass({

    render() {
        return (
            <div>
                <div id="login-btn">
                    <a href="/login">
                        <button type="button" className="btn btn-embossed btn-primary">Login</button>
                    </a>
                </div>
                <div id="signup-btn">
                    <a href="/signup">
                        <button type="button" className="btn btn-embossed btn-primary">Sign up</button>
                    </a>
                </div>
            </div>
        );
    }
})

var Layout = React.createClass({
    render() {
        console.log("layout props");
        console.log(this.props);
        return (
            <div id="review-web">
                <header className="header">
                    <UserMenu />
                </header>
                <div>
                    <RouteHandler path={ this.props.path } />
                </div>
            </div>
        )
    }
});

module.exports = Layout;

项目结构

Answer 1

除了将 ExtractTextPlugin 的输出加载到 HTML.

之外，您似乎一切都很好

当您使用 ExtractTextPlugin 时，webpack 会将 css、less 捆绑在一个单独的 bundle.css 文件中，您必须手动将其加载到您的应用程序中。在你从你的控制台运行 webpack CLI之后，你可以在你的webpackConfig.output.path文件夹中的一个文件夹中找到这个包。

通常我只在生产模式下使用ExtractTextPlugin。在开发模式下，我只使用 style-loader，所以我可以利用 hot-module-replacement，所以我不需要每次更改样式时都运行 webpack CLI （我知道我可以使用 webpack-middleware，但我不想）。

One of my dev webpack configs

One of my prod webpack configs

编辑这是您的 index.less 文件中的错字。我根据拉取请求为您修复了该问题:)

编辑 2 好的，这是我的最后一次尝试：

尝试将此添加到您的 wepback 配置文件中：

{test: /\.css/, loader: 'style-loader!css-loader'},

也许，只是也许，LESS 加载器会输出一个临时 CSS 文件，该文件也需要进行测试。不知道，我试试看。

那么，为了测试，我会这样做：

在 index.less 中停止导入。我的意思是，将所有内容都放入 index.less 中，看看会发生什么。
添加 CSS 测试后.. 尝试用常规 CSS 替换 LESS，看看是否可行。
尝试在您的 webpack 配置中指定一个 publicPath：https://github.com/webpack/docs/wiki/configuration

无法使用 webpack 将 LESS 加载到页面中

Cannot load LESS into page with webpack

javascript

less

reactjs

webpack