Next-plugins: Cant load slick-theme.css

[romainquellec]

I'm trying to load the slick-theme.css (https://github.com/kenwheeler/slick/blob/master/slick/slick-theme.css) but i'm getting :

ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type.

When I delete this part:

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('./ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/slick.eot');
    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}

everything is fine.

Related to this : https://github.com/webpack-contrib/mini-css-extract-plugin/issues/282

[needcaffeine]

I just successfully loaded this with next 7.0.0 and next-sass 1.0.1. Does that combo work for you? If not, can you show how you are importing the file?

[romainquellec]

I'm importing it like this on a page :

import "slick-carousel/slick/slick-theme.css";
import "slick-carousel/slick/slick.css";

I'm importing other css files in different pages with no problems.

[guigrpa]

Having the same issue trying to import the typeface-raleway module.

Example contents of this file:

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src:
    local('Raleway Thin '),
    local('Raleway-Thin'),
    url('./files/raleway-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
    url('./files/raleway-latin-100.woff') format('woff'); /* Modern Browsers */
}

/* raleway-100italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-display: swap;
  font-weight: 100;
  src:
    local('Raleway Thin italic'),
    local('Raleway-Thinitalic'),
    url('./files/raleway-latin-100italic.woff2') format('woff2'), /* Super Modern Browsers */
    url('./files/raleway-latin-100italic.woff') format('woff'); /* Modern Browsers */
}

[adueck]

I'm having the same issue with Font Awesome (see #310).

All other css imports work fine for me. But with Font Awesome I am getting the same error message as @romainquellec

[Purii]

Have you tried that solution? https://github.com/akiran/react-slick/issues/842#issuecomment-385378629

# Install dependencies
yarn add --dev @zeit/next-css file-loader url-loader

// next.config.js
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }

[sikhote]

Had success with suggestion from @Purii, but should this be patched on for us?

[Coriou]

Thanks @Purii, this solves the issue indeed, but I think this should be patched next-css instead. Good fix for now though.

[sergiubologa]

Have you tried that solution? akiran/react-slick#842 (comment)

# Install dependencies
yarn add --dev @zeit/next-css file-loader url-loader

```js
// next.config.js
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
webpack: function (config) {
config.module.rules.push({
test: /.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000,
name: '[name].[ext]'
}
}
})
return config
}
```

@Purii
Is file-loader needed?

[romainquellec]

👍 This is fixed. Should I get this issue close or do I keep it open to native improvement ?

[sthennarasan]

below one is my next.config.js

/* eslint-disable */
const path = require('path')
const withCss = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const withImages = require('next-images')
require('dotenv').config()
const Dotenv = require('dotenv-webpack')

module.exports = withImages(withSass(withCss({
        webpack: (config, { isServer }) => {
          if (isServer) {
            const antStyles = /antd\/.*?\/style\/css.*?/
            const origExternals = [...config.externals]
            config.externals = [
              (context, request, callback) => {
                if (request.match(antStyles)) return callback()
                if (typeof origExternals[0] === 'function') {
                  origExternals[0](context, request, callback)
                } else {
                  callback()
                }
              },
              ...(typeof origExternals[0] === 'function' ? [] : origExternals),
            ]

            config.module.rules.unshift({
              test: antStyles,
              use: 'null-loader',
            })
            config.module.rules.push({
              test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
              use: {
                  loader: 'url-loader',
                  options: {
                      limit: 100000,
                      name: '[name].[ext]'
                  }
              }
          })
          }

          config.plugins = config.plugins || [];
          config.plugins = [
              ...config.plugins,

              // Read the .env file
              new Dotenv({
                  path: path.join(__dirname, '.env'),
                  systemvars: true
              })
          ];
          return config
        },
        cssLoaderOptions: { // this solves the issue
          url: false
        }
      })))

cssLoaderOptions: { url: false }

This solved the slick-theme.css and fontello loading issues!

[dminkovsky]

Here is an example of how to use file-loader: https://github.com/zeit/next.js/issues/5438.

[timneutkens]

Hi, thanks for creating an issue. We currently recommend using nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support.