In my app, I have such folder structure for styles
styles
head
main
Head folder contains styles which supposed to be in <style> tag to fast render first screen.
The main folder contains styles which supposed to be compiled into style.css.
How can I setup web pack sass-loader to do that?
In your loaders in your webpack config add:
{
test: /\.scss$/,
loader: 'style!css?modules=true&localIdentName=[name]__[local]___[hash:base64:5]!sass'
}
Then for head and main you can name them with the scss extension and
import them like this (in your JS file)
import head from './head.scss'
import '!style!css?sass!<path-to-your-main>main.scss'
Then you can use it in your JSX like this:
<p className={head.myHeaderStyle}>Some text</p>
Related
I'm new to Next.js.
Although I declared css files in _app.tsx, some of styles defined in the css files are not working.
Some of styles use images imported from 'public/images' and this are not imported neither.
Please help me find out what is wrong with this. Do I have to change the folder structure?
The version of Next.js is "13.1.1".
Thanks in advance!!
I'm working on a project with below folder structures.
public
fonts
images
src
pages
styles
global.css
layout.css
My _app.tsx file looks like
import '#/styles/layout.css';
import '#/styles/common.css';
export default function App({ Component, pageProps }: AppProps) {
...
}
Rename your CSS file as layout.module.css. Use .module.css extension in your CSS files. Refer nextjs documentation for further references.
am also new to Nextjs , turned out you can't use regular CSS files, you should use CSS modules.
you need to rename each CSS file 'except global' to end with .module.css instead of .css
then you need to import the file in the component you want to style : import styles from 'style/file.module.css'
to style an element create a class in the CSS file:
.paragraph{ color:green }
and then use it in the component:
<p className={styles.paragraph}>I am styled with CSS modules</p>
Ref!
there is a standard CSS framework called Tailwindcss you should try it
I'm creating a vue.js web app, and I'd like to use SCSS to help with the styling. I've installed npm i node-sass sass-loader and I've created a vue.config.js at root level. In it I have this set
module.exports = {
css: {
loaderOptions: {
scss: {
additionalData: `#import "#/styles/global.scss";`
}
}
}
};
This is SCSS the folder structure
In every subfolder to the main styles folder I have a _all.scss that then imports every containing .scss file for that given subfolder. And in the global.scss all the subfolders _all.scss files gets imported.
// styles/base/_all.scss
#import 'reset.scss';
#import 'variables.scss';
// global.scss
#import 'base/all';
#import 'components/all';
My issue is that my web app doesn't load any of the .scss files or styles imported via the main global.scss file. I get no build errors, and if I for example remove the _variables.scss file, then I get an error that other .scss files can't access the declared scss variables. So that means that my .scss import method is woriking, but the styles aren't shown somehow.
Do I have to use every vue components <style> tag to do all the styling, or can I go about doing it the way I've structured it now?
I prefer not messing with the webpack config.
you can import your style in the main.js also
import '#/styles/global.scss';
index.jsx
import 'react-date-range/dist/styles.css'
import 'react-date-range/dist/theme/default.css'
I deployed a Rails app(Rails + React.js) on Heroku.
But styles of react-date-range component are not loaded on Heroku even it is working on local.
What is the way to fix this issue?
Obviously, you're using Webpack and you have configs for loading CSS, instead of using index.jsx add these two pre-compiled CSS into your root of CSS by this:
#import url("react-date-range/dist/styles.css");
#import url("react-date-range/dist/theme/default.css");
If the url function doesn't work try without it:
#import "react-date-range/dist/styles.css";
#import "react-date-range/dist/theme/default.css";
If these two guys aren't in your final bundle file, simply, use relative path, because it is a little hard to add Webpack configuration that Webpack understand node_modules absolute path of libraries inside css-loader.
#import "../node_modules/react-date-range/dist/styles.css";
#import "../node_modules/react-date-range/dist/theme/default.css";
I'm using Angular 6 to develop a single page web application,
and I added the following ngx-toast library to my project.
when I added the following Sass into my project and when I used "~" instead of the relative path it failed to load the libraries:
// regular style toast
#import '~ngx-toastr/toastr.css';
// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
#import '~ngx-toastr/toastr-bs4-alert';
// if you'd like to use it without importing all of bootstrap it requires
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import '~ngx-toastr/toastr-bs4-alert';
but it's work when I'm using the relative path:
// regular style toast
#import '../../node_modules/ngx-toastr/toastr.css';
// bootstrap style toast
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions
#import '../../node_modules/ngx-toastr/toastr-bs4-alert';
// if you'd like to use it without importing all of bootstrap it requires
#import '../../node_modules/bootstrap/scss/functions';
#import'../../node_modules/bootstrap/scss/variables';
#import '../../node_modules/bootstrap/scss/mixins';
#import '../../node_modules/ngx-toastr/toastr-bs4-alert';
my component modules
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
of course that I can leave it like that, or just download the actual css from the manual, but it's bothering me that's it's fails to import since it should work.
any solutions?
As per the SASS Docs, ~ will point to src/ folder, when we import any SCSS files. We need to tell angular to include node_modules/ path, when we import any sass file. This can be achieved using stylePreprocessorOptions property inside angular.json.
"styles": [
...
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/ngx-toastr"
]
}
I am using webpack 2 and react-bootstrap in my project ; I can't find how to have bootstrap CSS styles properly applied it seems like the .css file is not loaded, no matter which import statement I tried to use.
As far as I understand I do not need the full bootstrap package with javascript etc. since I am using react-bootstrap ; I just need the CSS. So I added this in my main.js file:
import 'bootstrap/dist/css/bootstrap.css';
It seems to work (no error message) but the styles are not applied...
I configured the css loader in my webpack config file as described on webpack 2 documentation.
Any help would be appreciated :)
When setting modules: true in the css-loader, the CSS is locally scoped by default, but you need them to be available globally. The simplest solution is to remove modules: true entirely. You could still use modules in your own CSS files by using :local.
But if you would like to use modules, there are some workarounds to import globals.
Defining separate rules
Instead of enabling modules for all the CSS files, you can make two different rules, that match the desired files. So let's say all CSS imports from node_modules should be treated as regular (global) CSS. The rules would look like this:
{
// For all .css files except from node_modules
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } }
]
},
{
// For all .css files in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
}
Of course you can be more specific in what you want to include/exclude, if you don't want the entire node_modules.
Specifying loaders inline
You can specify the loaders in the import and webpack will use those over the configured ones. You would import bootstrap as follows:
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
This is just a quick workaround without having to change any config, but it's probably not desirable, especially when having multiple such cases.