Skip to content

@font-face SyntaxError: Invalid or unexpected token #3408

@etodanik

Description

@etodanik

So, on my eternal quest to try to make CSS work with this repo, I have arrived to the following config:

config.module.rules.push({
    test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 8192
      }
    }
  });

  config.module.rules.push({
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    }),
  });

  config.plugins.push(
    new ExtractTextPlugin({
      filename: 'styles.css',
      allChunks: true
    })
  );

The extraction works as planned, and the file gets generated properly. However, source-map-support seems to somehow cough up on the CSS file, and gives this error:

@font-face {
^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Module._compile (/Users/danny/src/insights-frontend/node_modules/source-map-support/source-map-support.js:492:25)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)

Is there any ideas? Am I missing something? Is there a way to tell source-map-support to ignore *.css files?

  • I have searched the issues of this repository and believe that this is not a duplicate.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions