-
Notifications
You must be signed in to change notification settings - Fork 319
Unable to have both SASS Modules and Global Stylesheets #149
Comments
+1 I'm having the exact same issue. As soon as you import a CSS Module from |
I'm seeing the same thing in |
This is the case for the stylus plugin as well. |
@eugeneross solved it for me as well! Thank you for sharing. |
but his solution will add all available CSS files into the head , right? For example I have pages A,B,C,D and each has its own SCSS file. Does it only load A and global style when I go to page A? otherwise it will be super heavy bundle. |
Hey, It provides the same behaviour as CRA (Create React App) by allowing css-modules files (file.module.css) and normal css files (file.css) to work together and be extracted in the same stylesheet. |
Did this get any better with the release of Next 7? I'm really interested in applying a framework stylesheet globally but scoping my own stylesheets. |
Doesn't work with next 8.0.0-canary.2
|
I ended up tweaking the "getLocalIdent" of the css loader options:
|
I'm having this issue when i have global variables that i want to access in modules, i get variable undefined. Anyone managed to fix this? i have a global scss that i add in _app.js
The in index.js i'm adding the following style sheet and $color-brand-primary is coming up as undefined. Do i need to add a loader?
|
I ended up using the solution described here: https://spectrum.chat/next-js/general/import-bootstrap-scss-and-enable-cssmodules-both~eb9113e1-f1f7-4427-bcd0-fe72c1a4d259 This is my import App, { Container } from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withReduxStore from '../lib/with-redux-store';
import './App.global.scss'; // Used to import bootstrap or any other global stylesheet.
import styles from './styles.scss'; // CSS modules can be imported as usual.
class MyApp extends App {
render() {
const { Component, pageProps, reduxStore } = this.props;
return (
<Container>
<Provider store={reduxStore}>
<Component {...pageProps} />
</Provider>
</Container>
);
}
}
export default withReduxStore(MyApp); This is my const withSass = require('@zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 2,
localIdentName: '[local]___[hash:base64:5]',
},
webpack: config => {
config.module.rules.forEach(rule => {
if (rule.test.toString().includes('.scss')) {
rule.rules = rule.use.map(useRule => {
if (typeof useRule === 'string') {
return { loader: useRule };
}
if (useRule.loader.startsWith('css-loader')) {
return {
oneOf: [
{
test: new RegExp('.global.scss$'),
loader: useRule.loader,
options: { ...useRule.options, modules: false },
},
{
loader: useRule.loader,
options: useRule.options,
},
],
};
}
return useRule;
});
delete rule.use;
}
});
return config;
},
}); |
This workaround of using |
can use *.module.less instand ? @wedneyyuri |
@ckken I don't know for sure, but using |
no work for me !~ sad |
Here is my solution based on @wedneyyuri answer. By default css-modules is off. If you want to enable it you just need to add '.module' using global styles: using scoped styles: here's my
If you using .scss just change '.sass' => '.scss' in code. |
A better way to use
And then import with
|
@strunoder24 works great for scss but appears to have a bug related to use of |
I've had the same issues, so I created a small package to deal with it. (css + sass + modules + globals) |
I've found global SCSS + modules still don't work by default even after updating to Next.js 9.2, where built-in CSS modules/global was introduced. |
When you add any of the css plugins it'll disable built-in support. |
This is fixed for me in 9.2, however, I'm not using SASS so that might be why others are still having issues. For me, I import my global styles from And then import all other CSS files as modules via the |
Thank you so much! It works! |
@pixelkritzel thank you, its good to know, that it works well for you! |
So, there's no way to use both SASS global and module stylesheets? |
@jamius19 this workaround worked well for me - #403 (comment) (change css to scss/sass) |
@SZharkov Thank you very much. Working for me. |
YOU ARE MY SAVIOUR 🖤 |
The latest version of Next.js supports Global CSS and CSS Modules simultaneously (and Sass on |
This comment has been minimized.
This comment has been minimized.
This is fixed in Next.js 9.3 if you use the built-in Sass support and not |
Instead of global css by default why not do module css by default? Use |
Hello Team |
Expected Behavior
I want to expect styles from my modules to be compiled into the same stylesheet as my global styles. Please see demo setup below to understand where styles are being pulled from.
Current Behavior
Can't get both modules and global styles to work together in parallel. Only one of them can be used while the other cannot. Please see my comments in this demo repo in the files,
_document.js
andstyles/index.sass
Steps to Reproduce
yarn && yarn dev
_document.js
andstyles/index.sass
to turn on and off behaviors._document.js
, save, and you'll notice that module styles will be applied but not the global styles.Context
As stated in the above, I want the ability to use SASS modules within my
components
folder AND global styles in mystyles
folder together. As of right now I can either have styles from modules and NOT from my global stylesheet OR have styles from global stylesheet and not my modules.The only work around I've found is including the path of a component's style inside my
styles/index.sass
file, like so:@import '../components/Button/index'
The only issue with this is that the global stylesheet is imported into the
_document.js
and therefore reloads the page on save for those styles intstead of injecting those changes. That's not the biggest deal in the world, but not ideal.I'm not sure if the issue is due to the way modules and
_document.js
work together, or if there needs to be a specific way to allow this within thenext.config.js
setup.Your Environment
Issue is persistant for stable releases too.
The text was updated successfully, but these errors were encountered: