r.js optimiser can create multiple js modules as in
modules: [
{
name: "main",
exclude: [
"infrastructure"
]
},
{
name: "infrastructure"
}
],
Is there a way to create multiple css outputs?
Because one page needs set of css files and another page needs different set of css files.
r.js will automatically inline contents of #import url(...) links in all .css files found in the project directory. If you structure your CSS files correctly you can achieve modularisation, for example:
page1.css
#import url("common/shared.css");
#import url("page-1-specific.css");
page2.css
#import url("common/shared.css");
#import url("page-2-specific.css");
After running through r.js page1.css and page2.css will contain actual contents of the referenced files, i.e. contents of "shared.css" will be included in both of them.
Related
I have tried to set up some global Scss in my Gatsby application, but it looks like after doing this i am seeing some odd behaviour in dev tools:
You can see that my global styles are appearing and being overwritten multiple times.
It is a Gatsby app so i am using sass-loader and the default dart-sass.
Here is how i have configure my gatsby-config.js file to allow me to use these global styles based on this stackoverflow post: https://stackoverflow.com/a/65904094/12119984
module.exports = {
plugins: [
...
{
resolve: `gatsby-plugin-sass`,
options: {
additionalData: `#use 'main' as *;`,
//allow mixins, variables etc to be accessible globally
sassOptions: {
includePaths: [`${__dirname}/src/styles/sass`],
// data: `#import "main.scss";`,
},
},
}...
I the use #forward along with #extend to get it all working in my module.scss files. My folder structure looks like this:
My global styles are in base.scss and I import them into main.scss using #forward:
#forward "base";
#forward "layout";
#forward "components";
As an exmaple, here is my index.module.scss file where i then use these global styles:
.sectionHome {
...
h1 {
background-color: $color-secondary;
#extend .uMarginBottomLarge;
#extend .headingPrimary;
}
}
It seems like a reasonable approach to me to use some global styles but to extend them into local sccs module classes, so can anyone explain to why these global styles are being applied several times?
The #forward rule, according to the docs:
The #forward rule loads a Sass stylesheet and makes its mixins,
functions, and variables available when your stylesheet is loaded with
the #use rule. It makes it possible to organize Sass libraries across
many files, while allowing their users to load a single entrypoint
file.
So basically, each time you are requesting a CSS module in some component, you are importing all the nested extensions (#extend and #use). Moreover, because of React's component extensions, you may also nest styles when importing nested components (Button in Layout, Layout in a index.js, etc)
Global styles in CSS apply exactly in the same way as CSS "standard" files, as you can see in Gatsby's docs, extending its documentation, you will need to add the following in your gatsby-browser.js:
import "./src/styles/sass/main.scss"
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';
Is there a way to add hash values to images that are referenced in CSS when you compile using Webpack?
I'm using React, and have separate scss files for each component file (e.g header.js & header.scss). Within some of the scss files, I have a background image. However, my server has super high caching levels, and is caching the images within the compiled css files.
What I'd like to do is, during the css compilation, add a hash value to each image reference, which would update on every build. So for example, it would compile to this:
.background-class {
background-image: url('images/my-image.jpg?0adg83af0');
}
I've tried to use the url-loader, but because these images aren't being referenced in the JS files, I don't think they're being picked up?
I ended up using a combination of PostCSS and PostCSS CacheBuster. If anyone wants to add this to their webpack setup, you need to run npm i postcss-loader postcss-cachebuster, then in your webpack.config.js, add const PostCssCacheBuster = require('postcss-cachebuster'); to the top of your file, and add the following loader config in between css-loader and sass-loader (obviously if you use this setup):
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [
PostCssCacheBuster({
imagesPath: "/src/Frontend",
cssPath: "/" + distributionPath,
supportedProps: [
'background',
'background-image'
],
paramName: 'v='
})
]
}
},
I have just started a angular-7 based web application with sass, when I import scss within "styles.scss" then it works perfectly throughout the application but when I am trying to add/override css within component(profile.component.scss) then it's not working.
Angular CLI: 7.1.4
Angular: 7.1.4
Node: 11.6.0
Here are "angular.json" css structure of the application ---
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss"
],
Here are "styles.scss" structure that added for the application ---
#import "assets/scss/custom-mixin";
#import "assets/scss/header";
#import "assets/scss/page";
#import "assets/scss/footer";
#import "assets/scss/login";
#import "assets/scss/profile";
#import "assets/scss/profile-edit";
#import "assets/scss/privacy";
#import "assets/scss/search";
#import "assets/scss/testimonial";
#import "assets/scss/public-profile";
#import "assets/scss/card-builder";
#import "assets/scss/rtl";
#import "assets/scss/responsive";
Please check the above described structure and let me know if you find any error/mistakes within this and provide me specific way to work both css for the application.
You need to tell the angular compiler where to look for your scss files.
Add this to your angular.json file above your "styles" property:
"stylePreprocessorOptions": {
"includePaths": [
"src/theming"
]
}
Now create a directory src/themeing and add whatever .scss files you want.
You can then #import 'mycustomstuff' where src/theming/mycustomstuff.scss exists.
Hope this helps! If you're still stuck please provide us with your component.ts file(s).
You have to add new CSS file and include below the styles.scss then you can override the CSS.
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"node_modules/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css",
"src/styles.scss",
"src/custom.css"
]
I want to include an external style from a module in node_modules. Which is considered better practice?
Add the stylesheet to Angular.json in the application's build: styles: [], e.g.
"build": {
"styles": [
...,
"node_modules/leaflet/dist/leaflet.css"
}
}
Import the stylesheet into the application's styles.scss file, e.g.
#import "~leaflet/dist/leaflet.css";
If I were using styles.css instead of styles.scss, the second wouldn't work. However, given that I'm using SASS, I'm wondering if the second is preferred because it keeps Angular.json cleaner.
Are the two functionally equivalent or is there an important distinction that makes one better than the other?