javascript 无法使用 webpack 将 LESS 加载到页面中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31909459/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot load LESS into page with webpack
提问by Liondancer
I can't seem to load my LESSinto my page using webpack
我似乎无法LESS使用 webpack 将我的加载到我的页面中
Here is my webpack.config.js
这是我的 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
})
]
}
};
My app/index.jscontains:
我的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 stylesheetshould take all the buttons.lessbecause it contains @import "buttons.less";
var stylesheet应该把所有的，buttons.less因为它包含@import "buttons.less";
This is the reactjscomponent I am trying to load:
这是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;
Project structure
项目结构
回答by André Pena
You seem to be doing everything fine, except for loading the output from the ExtractTextPlugininto your HTML.
除了将输出从 加载ExtractTextPlugin到 HTML 中之外，您似乎一切正常。
When you use ExtractTextPlugin, webpack it will bundle css, lessin a separate bundle.cssfile which you have to manually load into your app. Afteryou ran the webpackCLI from your console, you can expect to find this bundle in a folder inside your webpackConfig.output.pathfolder.
当您使用ExtractTextPlugin，它的WebPack将捆绑css，less在一个单独的bundle.css，你必须手动加载到你的应用程序文件。之后您运行webpack从您的CLI命令行，你可以期望找到这个包里面的文件夹中的webpackConfig.output.path文件夹中。
Normally I use ExtractTextPluginonly in productionmode. In development mode, I simply use the style-loader, so I can take advantage of the hot-module-replacementand so I don't need to run the webpackCLI everytime I change styles (I know I could use the webpack-middleware, but I don't want to).
通常我ExtractTextPlugin只在生产模式下使用。在开发模式下，我只是使用style-loader，所以我可以利用 ，hot-module-replacement所以我不需要webpack每次更改样式时都运行CLI（我知道我可以使用 webpack-middleware，但我不想） .
One of my prod webpack configs
EDITIt was a typo on your index.lessfile. I fixed that for you on a pull request :)
编辑这是你的index.less文件的错字。我在拉取请求中为您修复了这个问题:)
EDIT 2Ok, here's my last attempt:
编辑 2好的，这是我的最后一次尝试：
Try to add this to your wepback config file:
尝试将其添加到您的 wepback 配置文件中：
{test: /\.css/, loader: 'style-loader!css-loader'},
Maybe, just maybe, the LESS loader outputs a temp CSS file that needs to be tested too. I don't know, I would try it.
也许，只是也许，LESS 加载器输出一个临时 CSS 文件，也需要测试。我不知道，我想试试。
Then, here's what I would do, in order to reduce to the minimum to test:
然后，这就是我要做的，以减少到最低限度进行测试：
- Stop importing in the index.less. I mean, put everything in the index.less and see what happens.
- After you've added the CSS test.. Try replacing LESS by regular CSS, and see if that works.
- Try specifing a publicPath on your webpack config: https://github.com/webpack/docs/wiki/configuration
- 停止在 index.less 中导入。我的意思是，把所有东西都放在 index.less 中，看看会发生什么。
- 添加 CSS 测试后.. 尝试用常规 CSS 替换 LESS，看看是否有效。
- 尝试在你的 webpack 配置中指定一个 publicPath：https: //github.com/webpack/docs/wiki/configuration
