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

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文件是编译的，但不是less文件。

我在这里缺少什么？为什么它告诉我我缺少合适的加载器？

---

更新：

为了验证@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 中将 less-loader 与 css-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 只负责将less代码转换为css，而不是将css转换为js，webpack能够理解并包含在最终捆绑 js。

这就是为什么我们需要将 less-loader 与 css-loader 链接以正确捆绑 less。

Answer 1

less-loader 是一个将 less 转换为 css 的加载器，webpack 不理解 css 没有适当的加载器。

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

{
  test: /\.less$/,
  use: ['css-loader', 'less-loader'],
},