Webpack4 - Сбой разбора модуля: неожиданный символ '@' - PullRequest
0 голосов
/ 09 марта 2020

Я новичок в использовании веб-пакетов, и я столкнулся с проблемой, из-за которой css -загрузчик не может разрешить мой @import?

Webpack Cofig:

const config = {
    entry: {
        main: __dirname + '/js/index.jsx'
    },
    devtool: 'eval-source-map',
    plugins: [
        new MiniCssExtractPlugin({
            filename: isDevelopment ? '[name].css' : '[name].[hash].css',
            chunkFilename: isDevelopment ? '[id].css' : '[id].[hash].css'
        })
    ],
    module: {
        rules: [
            {
                test: /\.jsx?/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.s(a|c)ss$/m,
                include: [
                    resolve(__dirname, '/sass'),
                ],
                use: [
                    {
                        loader: isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
                    },
                    {
                        loader: 'css-loader',
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: isDevelopment,
                            implementation: require('sass')
                        }
                    }
                ]
            }
        ]
    }
}

Структура папки :

application
|
|___static
|     |____dist
      |____js
      |     |____react components in here
      |____sass
      |      |____abstracts
      |      |        |____variables.scss
      |      |____pages
      |      |      |_____app.scss
      |      |____main.scss   
      |____package-lock.json
      |____package.json
      |____webpack.config.js

Содержимое main.scss содержит ошибку.

Ошибка:

ERROR in ./sass/main.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import 'abstracts/variables';
| @import 'pages/app';
| 
 @ ./js/components/App.jsx 20:0-37 35:19-25
 @ ./js/routes.js
 @ ./js/index.jsx

Любые указатели были бы хорошими! Спасибо!

Алекс

1 Ответ

0 голосов
/ 10 марта 2020

Ошибка была

                include: [
                    resolve(__dirname, '/sass'),
                ],

Удалена и работает как положено.

...