Ошибка синтаксического анализа модуля: ошибка: semantic/dist/semantic.min.css Неожиданный символ '@' (11:0)

Я использую текущую версию react-boilerplate (которая использует webpack) и установил Semantic-UI-React, как описано в официальной документации http://react.semantic-ui.com/usage

Когда я запускаю сервер, я получаю:

Server started ! ✓

Access URLs:
-----------------------------------
Localhost: http://localhost:3000
      LAN: http://192.168.100.103:3000
-----------------------------------
Press CTRL-C to stop

webpack built dba595efb772df0727e8 in 11657ms

ERROR in ./semantic/dist/semantic.min.css
Module parse failed: /Users/standardnerd/development/template/semantic/dist/semantic.min.css Unexpected character '@' (11:0)
You may need an appropriate loader to handle this file type.
|  *
|  */
| @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);/*!
|  * # Semantic UI 2.2.7 - Reset
|  * http://github.com/semantic-org/semantic-ui/
 @ ./app/app.js 20:0-43
 @ multi main

Какой «подходящий загрузчик» мне нужен?

Парсеру не нравится оператор @import в /semantic/dist/semantic.min.css:

@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);

Как решить эту проблему?


webpack semantic-ui-react semantic-ui react-boilerplate
person StandardNerd    schedule 16.02.2017    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Если вы используете директиву include в правиле, обязательно включите также node_modules:

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader', 'resolve-url-loader'],
  include: [
    path.join(__dirname, 'src'),
    /node_modules/
  ],
},

Это должно решить проблему, поскольку вы инструктируете веб-пакет обязательно включать модули узла при загрузке css, чтобы он мог правильно использовать загрузчик css при импорте пакета семантического пользовательского интерфейса css.

person Alessandro M    schedule 02.05.2017

arrow_upward
3
arrow_downward

Шаг 1: Установите следующие пакеты

npm install --save-dev css-loader sass-loader node-sass url-loader file-loader

Шаг 2: Затем в файле webpack.config.js:

module: {
    rules: [
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        {
            test: /\.s[a|c]ss$/,
            loader: 'sass-loader!style-loader!css-loader'
        },
        {
            test: /\.(jpg|png|gif|jpeg|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
    ]
}

Шаг 3: В модулях

Если вы установили семантический css через пакет npm npm install --save-dev semantic-ui-css, то запись импорта должна быть import './node_modules/semantic-ui-css/semantic.min.css'

Используйте соответствующий статус импорта, если вы не установили semantic-ui-css через npm.

person BhaskarKG    schedule 18.01.2018

arrow_upward
0
arrow_downward

Я мог бы решить проблему с установкой sass-loader - так как я все равно буду использовать scss.

npm install sass-loader node-sass webpack --save-dev

переименуйте ./semantic/dist/semantic.min.css в ./semantic/dist/semantic.min.scss и изменив конфиг:

    test: /\.scss$/,
      use: [{
        loader: 'style-loader',
      }, {
        loader: 'css-loader',
      }, {
        loader: 'sass-loader',
      }],
person StandardNerd    schedule 17.02.2017