更新：

Question

我需要一些帮助来理解webpack less-loader的行为。

我正在使用webpack 4.5.0。

这是我的webpack配置：

const fs = require('fs');
const path = require('path');

const config = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: 'webpack-bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true,
                        presets: ['react'],
                    }
                }
            },
            {
                test: /\.css$/,
                use: 'css-loader',
            },
            {
                test: /\.less$/,
                use: 'less-loader',
            },
        ],
    },
};

module.exports = config;

这是我的源文件结构：

src
 |- index.html
 |- index.js
 |- index.css
 |- index.less
webpack.config.js
package.json

以下是package.json的内容：

{
    "name": "xxx",
    "version": "2.1.0",
    "private": true,
    "scripts": {
        "build": "$(yarn bin)/webpack"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.4",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.11",
        "less": "^3.0.1",
        "less-loader": "^4.1.0",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "webpack": "^4.5.0",
        "webpack-cli": "^2.0.14"
    }
}

以下是index.less的内容：

body {
    background: #000;
}

当我运行yarn build时，我得到了这些输出：

$ yarn build
yarn run v1.5.1
$ $(yarn bin)/webpack
Hash: deadade0357a0f63a681
Version: webpack 4.5.0
Time: 690ms
Built at: 2018-4-18 17:18:37
            Asset     Size  Chunks             Chunk Names
webpack-bundle.js  695 KiB    main  [emitted]  main
Entrypoint main = webpack-bundle.js
[./src/index.css] 192 bytes {main} [built]
[./src/index.js] 339 bytes {main} [built]
[./src/index.less] 163 bytes {main} [built] [failed] [1 error]
    + 22 hidden modules

ERROR in ./src/index.less
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   background: #000;
| }
 @ ./src/index.js 5:0-22

如您所见，js文件和css文件已编译，但文件不会少。

我在这里缺少什么？为什么它告诉我我错过了适当的装载机？

更新：

为了验证@felixmosh所说的内容，我稍微更新index.less：

body {
    a {
        text-decoration: none;
    }
}

当我再次编译时，错误消息变为：

...
[./src/index.less] 170 bytes {main} [built] [failed] [1 error]
    + 22 hidden modules

ERROR in ./src/index.less
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body a {
|   text-decoration: none;
| }
 @ ./src/index.js 5:0-22

正如您所看到的，实际编写的代码实际上编译为css（body a部分）。

在webpack.config.js中用css-loader链接less-loader之后：

const path = require('path');

const config = {
    ...
    module: {
        rules: [
            ...
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'less-loader',
                    },
                ],
            },
        ],
    },
};

module.exports = config;

构建输出更改为：

Built at: 2018-4-19 10:59:58
            Asset     Size  Chunks             Chunk Names
webpack-bundle.js  695 KiB    main  [emitted]  main
Entrypoint main = webpack-bundle.js
[./src/index.css] 192 bytes {main} [built]
[./src/index.js] 339 bytes {main} [built]
[./src/index.less] 198 bytes {main} [built]
    + 22 hidden modules
Done in 1.38s.

所有代码都已成功编译和捆绑。

总之，less-loader只负责将较少的代码转换为css ，但不将css转换为js 哪个webpack能够理解并包含在最终捆绑js。

这就是为什么我们需要使用css-loader链接less-loader来正确捆绑更少的东西。

Answer 1

using(IDataReader reader = command.ExecuteQuery()) { reader.Read(); var field = reader.GetName(0); var value = reader.GetValue(0); }是一个加载器，可以将较少的转换为css，如果没有正确的加载器，webpack就无法理解less-loader。

在这种情况下，你需要连接所有css相关的加载器。

css

webpack - 使用less-loader而不链接css-loader时“模块解析失败：意外令牌”

更新：

1 个答案: