webpack - "Ошибка синтаксического анализа модуля: неожиданный токен" при использовании less-loader без цепочки css-loader

Мне нужна помощь в понимании поведения webpack-загрузчика.

Я использую веб-пакет 4.5.0.

Вот мой конфиг веб-пакета:

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 часть).

После того, как я цепью less-loader с css-loader в webpack.config.js:

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.

Вот почему нам нужно связать less-loader с css-loader, чтобы правильно связать меньшее.

Источник

1 ответ

Решение

less-loader это загрузчик, который меньше трансформируется в css, webpack не понимает css без правильного загрузчика.

Вы должны согласовать все css связанные загрузчики в этом случае.

{
  test: /\.less$/,
  use: ['css-loader', 'less-loader'],
},
Источник
Другие вопросы по тегам