Webpack: как исправить ошибку Module parse failed: Unexpected token?

Question

MFT @MFT

Webpack
Sass

Webpack: как исправить ошибку Module parse failed: Unexpected token?

Здравствуйте! Впервые пытаюсь применить sass. Настраиваю webpack:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path=require('path');

module.exports={
	entry:'./src/index.js',
	output:{
		filename:'bundle.js',
		path:path.resolve(__dirname, 'dist')
	},
	module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
  ]
},
plugins: [
 new ExtractTextPlugin('style.css')
],
resolve: {
    extensions: ['.js', '.scss']
}
}

файлы scss и js лежат в одной папке (src).
scss подключен во входном index.js:
import './src/base.scss'
При запуске webpack получаю ошибку:
ERROR in ./src/base.scss 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loader
s are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> $bg-color: pink;
|
| body {
@ ./src/index.js 1:0-20

Вопрос задан более трёх лет назад
6864 просмотра

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 1

9 комментариев

MFT @MFT Автор вопроса
пробую с MiniCssExtractPlugin:

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const path=require('path'); module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.scss$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'], } ] }, plugins: [ [new MiniCssExtractPlugin()], resolve: { extensions: ['.js', '.scss'] } }

Получаю ошибку:
ERROR in ./src/base.scss 1:9
Module parse failed: Unexpected token (1:9)
You may need an appropriate loader to handle this file type, currently no loader
s are configured to process this file. See https://webpack.js.org/concepts#loade
rs
> $bg-color: pink;
|
| body {
@ ./src/index.js 1:0-20
Написано более трёх лет назад

Just Me @Just__Den

MFT,

npm install node-sass sass-loader css-loader

module: {													
  rules: [													
	  {											
		test: /\.s[ac]ss$/,  									
		use: [													
		   MiniCssExtractPlugin.loader,													
		   {													
			loader: "css-loader",												
			options: {url: false}												
		   },   											
		   "sass-loader",   													
		],												
	},													
  ],													
},

Написано более трёх лет назад

MFT @MFT Автор вопроса

не помогает, та же ошибка (

Написано более трёх лет назад
Just Me @Just__Den

MFT,

Module parse failed: Unexpected token (1:9)

смотри ошибку на строке 1, в 9 символе в scss файле

Написано более трёх лет назад
MFT @MFT Автор вопроса
не помогает, не найдя ошибку вообще, удалила первую строку, все равно находит ошибку в новой первой строке, четвертом символе. Код файла:

body{ background: green; }
Написано более трёх лет назад
Just Me @Just__Den

MFT, закинь файлы проекта на гитхаб или ещё куда-то и кинь ссылку

Написано более трёх лет назад
MFT @MFT Автор вопроса

https://github.com/Mariya89/map
Спасибо!

Написано более трёх лет назад

Just Me @Just__Den

всё работает.

1) У тебя синтаксические ошибки в файле webpack.config.js, который должен быть таким:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [{
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              url: false
            }
          },
          "sass-loader",
        ],
      }, ],
    },
    plugins: [
      new MiniCssExtractPlugin()
	],
	resolve: {
        extensions: ['.js', '.scss']
      }
    }

2) файл индекс без расширения. Должен быть index.html

3) и в нём неверно подключены файлы. Должно быть так:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel='stylesheet' href='dist/main.css'>

</head>

<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

Написано более трёх лет назад