Webpack，less-loader - 意想不到的令牌 - 为什么？ [英] Webpack, less-loader - Unexpected token - Why?
问题描述
我正在使用Webpack（在Windows环境中），我正在尝试使用 less-loader 和 extract-text-webpack-插件生成一个css文件。我有少， webpack-core 和 webpack 也在我的 node_modules 文件夹。
I'm using Webpack (in a Windows environment) and I'm trying to use less-loader and extract-text-webpack-plugin to generate a css file. I have less, webpack-core and webpack also in my node_modules folder.
在我的应用程序中，我使用：
In my app I use:
require('./index.less');
我的Webpack配置：
My Webpack config:
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: [
'./app/index.jsx'
],
output: {
path: path.join(__dirname, '/public'),
filename: "js/app.js"
},
module: {
loaders: [{
test: /\.(js|jsx)$/,
include: path.join(__dirname, '/app'),
exclude: path.join(__dirname, '/node_modules'),
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ["transform-object-rest-spread"]
}
},{
test: /\.(css|less)$/,
loader: ExtractTextPlugin.extract("css-loader", "less-loader")
}]
},
plugins: [
new ExtractTextPlugin('css/app.css')
]
};
根据我的理解，这应该意味着当Webpack遇到我的索引时。少文件，首先使用 less-loader 生成CSS，然后 css-loader 将内容放入导出文件（在这种情况下为 css / app.css ）。
From my understanding, this should mean that when Webpack comes across my index.less file, it uses less-loader first to generate CSS, then css-loader to drop the contents into the export file (css/app.css in this case).
这是错误我得到：
./app/index.less中的错误
ERROR in ./app/index.less
模块构建失败：ModuleParseError：模块解析失败：c：\ node \react2 \\\
ode_modules \less-loader \ index.js！c：\ node \ react2 \\\ index.less第1行：意外的令牌{
Module build failed: ModuleParseError: Module parse failed: c:\node\react2\node_modules\less-loader\index.js!c:\node\react2\app\index.less Line 1: Unexpected token {
您可能需要一个合适的加载器来处理这种文件类型。
You may need an appropriate loader to handle this file type.
|身体{|颜色：＃333; | background-color：＃f5f5f5; DependenciesBlock的
。 （c：\\\
ode\react2 \\\
ode_modules\webpack\lib\NormalModule.js:113:20）DependenciesBlock.onModuleBuild的
（c：\ node \ third2 \ node_modules \ webpack-core \lib; \\NormalModuleMixin.js：310：10）
at nextLoader（c：\ node \react2 \\\
ode_modules\webpack-core \lib \NormalModuleMixin.js：275： 25）
at c：\\\
ode\react2 \\\
ode_modules\webpack-core \lib \ NormalModuleMixin.js：292：15
at context.callback（c：\ node \\ \\ react2 \\\
ode_modules\webpack-core \lib \ NormalModuleMixin.js：148：14）
at c：\ node \react2 \ node_modules \ _less-loader \ index.js： 70：3
at c：\ node\react2 \\\
ode_modules\less\lib\less\render.js:35:17
at c：\ node \ react2 \ nnode_modules\less\lib\less\parse.js：63：17
at Object.finish [as _finish]（c：\ node \ react 2\\\
ode_modules\less\lib\less\parser\parser.js:183:28）
at Object.ImportVisitor._onSequencerEmpty（c：\ node \ response2 \ node_modules \ less\lib\less\visitors\import-visitor.js：35：14）在ImportSequencer.tryRun上的
（c：\ node \ react2 \ node_modules \\\\\ less \visitors\import-sequencer.js：50：14）
at Object.ImportVisitor.run（c：\ node \react2 \\\
ode_modules \ nothing \ lib \\\\\\\ \ import-visitor.js：29：25）
at Object.Parser.parse（c：\ node \react2 \\\
ode_modules\less\lib\lessh \\\\\\\\\\\ js：189：22）在Object.parse上的
（c：\ node \\ \\ _react2 \\\
ode_modules \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Object.render（c：\ node \react2 \\\
ode_modules\less\lib\less\render.js:25:18）
at Object.module.exports（c：\ nod） e\react2\\\
ode_modules\less-loader\index.js：62：7）
| body { | color: #333; | background-color: #f5f5f5; at DependenciesBlock. (c:\node\react2\node_modules\webpack\lib\NormalModule.js:113:20) at DependenciesBlock.onModuleBuild (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) at nextLoader (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) at c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:292:15 at context.callback (c:\node\react2\node_modules\webpack-core\lib\NormalModuleMixin.js:148:14) at c:\node\react2\node_modules\less-loader\index.js:70:3 at c:\node\react2\node_modules\less\lib\less\render.js:35:17 at c:\node\react2\node_modules\less\lib\less\parse.js:63:17 at Object.finish [as _finish] (c:\node\react2\node_modules\less\lib\less\parser\parser.js:183:28) at Object.ImportVisitor._onSequencerEmpty (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:35:14) at ImportSequencer.tryRun (c:\node\react2\node_modules\less\lib\less\visitors\import-sequencer.js:50:14) at Object.ImportVisitor.run (c:\node\react2\node_modules\less\lib\less\visitors\import-visitor.js:29:25) at Object.Parser.parse (c:\node\react2\node_modules\less\lib\less\parser\parser.js:189:22) at Object.parse (c:\node\react2\node_modules\less\lib\less\parse.js:61:18) at Object.render (c:\node\react2\node_modules\less\lib\less\render.js:25:18) at Object.module.exports (c:\node\react2\node_modules\less-loader\index.js:62:7)
所以 less-loader 第1行有问题。我的LESS代码非常简单：
So the less-loader has a problem at line 1. My LESS code is very simple:
body {
color: #333;
background-color: #f5f5f5;
margin: 0;
padding: 2% 5%;
text-align: center;
font-family: arial;
font-size: 1em;
p {
margin: 0 0 1em 0;
padding: 0;
}
}
如何减去 - 装载机有问题 body {} ..？
UPDATE ：如果我像这样添加 style-loader ： ExtractTextPlugin.extract（style-loader，css-loader， less-loader），错误消失，但生成的CSS文件包含LESS - 如同 - 嵌套仍然存在： body {p {}} 而不是 body {} body p {} 。
UPDATE: If I add style-loader like this: ExtractTextPlugin.extract("style-loader", "css-loader", "less-loader"), the error goes away, but the resulting CSS file contains LESS - as in - the nesting is still there: body { p {} } instead of body {} body p {}.
推荐答案
我正在审核此页面： https://webpack.github.io/docs/stylesheets.html 优秀的Webpack文档： - ）。
I was reviewing this page: https://webpack.github.io/docs/stylesheets.html in the excellent Webpack docs :-).
它显示： ExtractTextPlugin.extract（style-loader，css-loader！less-loader ）。
我试过这个并且它有效！我在输出文件中得到了纯CSS。
I tried this and it works! I get plain CSS in the output file.
我没有正确使用 ExtractTextPlugin.extract（）。 extract-text-webpack-plugin docs 显示第一个参数是可选的（在未提取css时应该使用的加载器），第二个参数是加载器字符串（应该用于将资源转换为css导出的加载器）模块）。
I wasn't using ExtractTextPlugin.extract() correctly. The extract-text-webpack-plugin docs show that the first param is optional (the loader(s) that should be used when the css is not extracted), and the second param is loader string (the loader(s) that should be used for converting the resource to a css exporting module).
这篇关于Webpack，less-loader - 意想不到的令牌 - 为什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
