Next-plugins: Using CSS and SASS

[ghost]

When I use both, the CSS and SASS plugin, I can only import SCSS or CSS (depending on the order of the plugins in next.config.js.

const withCSS = require('@zeit/next-css');
const withSASS = require('@zeit/next-sass');

module.exports = withCSS(withSASS({
  exportPathMap: (() => {
    return {
      '/': {
        page: '/',
      },
    };
  }),
  distDir: 'build',
}));

import 'index.css'
import 'index.scss';

This will only output the .css file, but not the .scss file.

[Everettss]

It looks like a normal behavior. How do you expect to webapack output .scss file? (It is probably technically possible but why?)

[timneutkens]

It's a bug, you can do this as temporary workaround:

const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
module.exports = withSass(withCss({
  webpack(config) {
    config = commonsChunkConfig(config, /\.(sass|scss|css)$/);
    return config
  }
}))

[ghost]

@Everettss what?

@timneutkens thanks, that's working like a charm!

[timneutkens]

It's still broken though, so we have to fix it in the plugins 😄

[reflog]

Any news? I'm having the same issue here and the solution by @timneutkens didn't help me. When using both withCSS and withSASS, only one is used.
Thanks in advance!

[programbo]

For the record, @timneutkens' workaround worked fine for me.

[mmiszy]

Is this issue resolved? How do use CSS and SCSS?

[curran]

Related issue: next-plugins - Multi plugins not working as result gets overwritten https://github.com/zeit/next-plugins/issues/71

[curran]

I'm using the suggested workaround, and I'm getting behavior where:

• When NODE_ENV === 'development', both the SASS and CSS are bundled correctly
• When NODE_ENV === 'production', (after next build) _only_ the CSS is bundled correctly, and the SASS is missing from the bundle.

FWIW, here's my next.config.js:

const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');
module.exports = withSass(withCSS({
  webpack: config => commonsChunkConfig(config, /\.(sass|scss|css)$/)
}));

Versions:

"@zeit/next-css": "^0.2.0",
"@zeit/next-sass": "^0.2.0",
"next": "^6.1.1",
"node-sass": "^4.9.2",

[curran]

Aha! Nevermind - the workaround succeeded in production after all.

What I was doing wrong was importing the .sass file inside pages/_document.js. Once I moved the import to a component imported by a page in the pages directory, the sass landed in the CSS bundle.

[bing1021]

I'm using the suggested workaround, but when i run dev, i get error

Here is error:

/Users/shuta/my_github_projects/next-project/node_modules/@zeit/next-css/commons-chunk-config.js:3
  config.plugins = config.plugins.map(plugin => {

TypeError: Cannot read property 'map' of **undefined**

Here is my config:

/* eslint-disable import/no-extraneous-dependencies */
const withLess = require('@zeit/next-less');
const withCss = require('@zeit/next-css/commons-chunk-config');
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config');
const path = require('path');

// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.css'] = () => {};
}
const nextConfig = withLess(withCss({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
  webpack: (config) => {
    config.module.rules.push({
      enforce: 'pre',
      test: /\.js$/,
      include: [
        path.resolve(__dirname, 'pages'),
        path.resolve(__dirname, 'src'),
        path.resolve(__dirname, 'server.js'),
      ],
      exclude: /node_modules/,
      loader: 'eslint-loader',
    });
    return commonsChunkConfig(config, /\.(less|css)$/);
  },
}));

module.exports = nextConfig;

Versions

  "dependencies": {
    "antd": "^3.7.0",
    "koa": "^2.5.2",
    "koa-router": "^7.4.0",
    "next": "^6.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  },
  "devDependencies": {
    "@zeit/next-css": "^0.2.0",
    "@zeit/next-less": "^0.3.0",
    "babel-eslint": "^8.2.6",
    "babel-plugin-import": "^1.8.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "eslint": "^5.1.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "husky": "^0.14.3",
    "less": "^3.7.1",
    "lint-staged": "^7.2.0"

How can i fix it?

[bing1021]

Fixed !!

I rewrite the function import from '@zeit/next-css/commons-chunk-config'

[msand]

This might be good to include in the readme(s) until its fixed, no?

[farhadniaz]

I have just this issue . thanks to @curran. That solution worked for me

[LeeDownshift]

I have just tried the solution detailed in this issue, but unfortunately it doesn't appear to be working for me. When I run development I get the following error:

Error: Cannot find module '@zeit/next-css/commons-chunk-config'

I have tried running npm install for the module in question but it doesn't appear to exist. I am using version 1.0.1 of both @zeit/next-css and @zeit/next-sass.

Can anyone shed some light to help get me over this hurdle?

Thanks

[ChrisWen960216]

I have just tried the solution detailed in this issue, but unfortunately it doesn't appear to be working for me. When I run development I get the following error:

Error: Cannot find module '@zeit/next-css/commons-chunk-config'

I have tried running npm install for the module in question but it doesn't appear to exist. I am using version 1.0.1 of both @zeit/next-css and @zeit/next-sass.

Can anyone shed some light to help get me over this hurdle?

Thanks

I have got the same problem like you,I just find the css-loader-config for that path.I still don't know how to chain them either

[LeeDownshift]

@ChrisWen960216 For me the issue I mentioned occurred because I wanted to use the react-materialize package in my project and still use SASS for any custom styling.

Initially I couldn't find information on how to add the necessary stylesheets into the HEAD tag of the layout and so I tried to compile the minified Materialize CSS along with my own SASS which resulted in me finding this post on how to compile both CSS and SASS together (and failing to get the solution working due to the error I detailed in my previous post.)

If like me you have got this error because you're trying to use a CSS framework of some kind the solution is to to create a custom document as detailed here and simply add the stylesheet links in as you would normally.

This way you can still use the minified CSS of your chosen framework while still using SASS in development.

[ChrisWen960216]

@ChrisWen960216 For me the issue I mentioned occurred because I wanted to use the react-materialize package in my project and still use SASS for any custom styling.

Initially I couldn't find information on how to add the necessary stylesheets into the HEAD tag of the layout and so I tried to compile the minified Materialize CSS along with my own SASS which resulted in me finding this post on how to compile both CSS and SASS together (and failing to get the solution working due to the error I detailed in my previous post.)

If like me you have got this error because you're trying to use a CSS framework of some kind the solution is to to create a custom document as detailed here and simply add the stylesheet links in as you would normally.

This way you can still use the minified CSS of your chosen framework while still using SASS in development.

Actually I find maybe it's not the styles-loader's problem,for now just use

withSass(withCss())

can resolve all .css and .scss,so may be the problem is that the third part styles contains font-files or other resources that cannot resolve by loader.For me,the react-slick needs to add the file-loader to make sure it works well on next.js.

[mehranabi]

Hello, I have the same problem as @LeeDownshift ,
My next.config.js looks like:

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
module.exports = withSass(withCSS({
  webpack: (config, { }) => {
    config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    config.node = {
      fs: 'empty'
    }
    return config
  }
}))

I've installed "@zeit/next-css": "^1.0.1" and "@zeit/next-sass": "^1.0.1" and "node-sass": "^4.11.0"

But when I run my project I get this error:
Error: Cannot find module '@zeit/next-css/commons-chunk-config'

[curran]

@mehranabi According to this PR https://github.com/zeit/next-plugins/pull/228 ,commons-chunk-config.js was removed. You should be able to just remove the code that uses that module, namely the following lines:

const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')

and

config = commonsChunkConfig(config, /\.(sass|scss|css)$/)

[abhijithvijayan]

@curran That leaves

module.exports = withSass(withCSS());

right

[curran]

Yes.

[ciriussaini]

Hello, I have the same problem as @LeeDownshift ,
My next.config.js looks like:

const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass')
const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')
module.exports = withSass(withCSS({
  webpack: (config, { }) => {
    config = commonsChunkConfig(config, /\.(sass|scss|css)$/)
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    config.node = {
      fs: 'empty'
    }
    return config
  }
}))

I've installed "@zeit/next-css": "^1.0.1" and "@zeit/next-sass": "^1.0.1" and "node-sass": "^4.11.0"

But when I run my project I get this error:
Error: Cannot find module '@zeit/next-css/commons-chunk-config'

Did You solved this problem ?? I am getting this too ..

[ciriussaini]

@mehranabi According to this PR #228 ,commons-chunk-config.js was removed. You should be able to just remove the code that uses that module, namely the following lines:

const commonsChunkConfig = require('@zeit/next-css/commons-chunk-config')

and

config = commonsChunkConfig(config, /\.(sass|scss|css)$/)

Did you solved this issue ??

[ciriussaini]

@ChrisWen960216 For me the issue I mentioned occurred because I wanted to use the react-materialize package in my project and still use SASS for any custom styling.
Initially I couldn't find information on how to add the necessary stylesheets into the HEAD tag of the layout and so I tried to compile the minified Materialize CSS along with my own SASS which resulted in me finding this post on how to compile both CSS and SASS together (and failing to get the solution working due to the error I detailed in my previous post.)
If like me you have got this error because you're trying to use a CSS framework of some kind the solution is to to create a custom document as detailed here and simply add the stylesheet links in as you would normally.
This way you can still use the minified CSS of your chosen framework while still using SASS in development.

Actually I find maybe it's not the styles-loader's problem,for now just use

withSass(withCss())

can resolve all .css and .scss,so may be the problem is that the third part styles contains font-files or other resources that cannot resolve by loader.For me,the react-slick needs to add the file-loader to make sure it works well on next.js.

Did you find any solution to this ??

[abhijithvijayan]

@ciriussaini Why don't you try using the plugins with next-compose-plugins !

Like I did here

[othneildrew]

If anyone is still having this issue one solution that works great that I see people are overlooking is by simply using SASS in the next.config.js then importing the CSS files via the CSS @import.

Here's an example...

// next.config.js
const withSASS = require('@zeit/next-sass');
module.exports = withSASS({ /* options goes here */});

// styles.scss
@import '../path/to/.css';
@import '../node_modules/../../styles.css'; // also works with node modules

_app.js or any other file
import '../styles.scss'

Hope this helps it's my first GitHub comment 😅

[meliborn]

@othneildrew but what if I have css file in some external package?

[andrewlorenz]

@meliborn - I have a solution - prefix the package within node_modules with a tilde.
You basically import the CSS via standard SASS
Working example here using videojs:

// next.config.js
const withSASS = require('@zeit/next-sass');
module.exports = withSASS({ /* options goes here */});

// component "VideoPlayer.jsx" requiring external CSS
import './VideoPlayer.scss';

// VideoPlayer.scss
@import '~video.js/dist/video-js.css';