Css module with react - javascript

I'm building a React website, to enable css modules styles I eject my project I used
npm run eject
And i added extra configurations in the webpack.config.dev.js and webpack.config.prod.js files, the problem is that I was using a component call react-big-calendar (https://github.com/intljusticemission/react-big-calendar), and in that module I have to import a css file. The problem is that when I enable the module features it doesn't apply the css styles to the calendar, It used to look like:
And now it looks like this:
What can I do in order to apply classes from the big-calendar css file?
Thanks!

Now you don't have to eject your project and add extra config to webpack.config to enable css modules.
Now whenever you want to use css modules, just name the file [name].module.css and that's it. This will solve your problem with the components which are not using css modules.
Let me know if it works for you

Related

Vue CLI 3 target build lib exclude shared styling

I am currently working on a Vue.js project where i use the Vue CLI 3 to build components in lib mode like this: vue-cli-service build --no-clean --target lib --name ComponentName.vue. The components can then be used any website if registered in a Vue instance.
However, the website contains it's own stylesheets and the component too. To develop and see the actual styles applied to component i have to pull in these (shared) styles in every component i develop. Therefore they are also in the compiled stylesheets after building the component using the command stated above (vue-cli-service build).
My question: Can i exclude the (shared) styles when building the component? I can't find anything about it in the docs (https://cli.vuejs.org/). If somebody could provide the answer or a (Webpack) workaround that would be much appreciated.
Many thanks in advance!
I am not sure if I understand you correctly but there is an option to have these styles inline in the components itself, which would be much easier for development.
https://cli.vuejs.org/guide/build-targets.html#app
dist/myLib.css:
Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)

How to compile SCSS to CSS and load the CSS code as string into a variable?

I am building a SPA with Vue (Quasar actually) in which I need to be able to:
Load the contents of a CSS file into a JS variable (or Vue data
property) at runtime
This CSS file should be produced at build time
from a SCSS file
I don’t want to load a pre-made CSS file, I want to be able to author the CSS code via SASS.
I also don’t want to compile the CSS from SCSS at runtime, e.g. on every app load.
In other words I have the following workflow in mind:
Author the CSS in a pre-defined SCSS file that is part of my project structure
At build time (or at run-dev time) I want that this SCSS is compiled into a CSS file
Then at runtime, in one of my Vue components, I want to load the previously produced CSS code as string into a variable
The reasoning for that is that this CSS code will then be fed into and iframe (via postMessage-ing) and the iframe will use CSSStyleSheet’s insertRule() to apply the styles to the page.
How should I configure my project and packages so that this can happen? One thing that I found already is that I might need to use the raw-loader but how do I prepare the CSS file when building the project so that the raw-loader can get it at runtime?
From an initial look you have two problems here both of which are relatively simple.
The first one is you need to include a scss compiler plugin during your projects build step. Which one you use will depend on any existing tooling you may be using. Otherwise, you can just drop in https://www.npmjs.com/package/node-sass
The second issue is how to acquire the css at runtime. You have a couple options here. You can compile the file into your bundle or you could retrieve it at runtime.
Runtime would keep your bundle small and allow you to serve the css normally but this requires a server to serve it. Compile time would be faster to load initially but increase your bundle size.
If you are using webpack you could use the raw loader you linked but if you are not currently using webpack that is probably out of scope.
You could do this by adding a new step to your build that converts the css into a String literal which would alleviate the need to load it at runtime but increase your bundle side.
For loading at runtime, you could easily retrieve the file via ajax from an http server.
I have found the following solution:
Install the "raw-loader" loader
Import the SCSS using the following statement:
import style from '!raw-loader!sass-loader!./my-styles.scss'
Note: the "!" at the beginning is to override the default loaders configuration. In my case Quasar chains the "style-loader" for SCSS files by default (to output a tag in the head) so I have to disable it in this case.
And now I have the compiled CSS code in the style variable.
First, run the following.
npm install path sass
Aftre that...
const path = require("path");
const sass = require("sass");
const css = sass.compile(path.join(__dirname, "style.scss")).css;
console.log(css);

How to override Bootstrap variables in Vue workflow ( Vanilla Bootstrap )?

The officially recommended way to customize / theme bootstrap is by overriding the bootstrap variables using sass. But how do I do this, or rather, how do I add this part of the process into the Vue webpack workflow ?
Googling led to try editing the vue.config.js file to add scss loader into webpack but I am unable to find the required file.
This is the directory structure
I have used vue-cli v3.4 to setup the project.
I am using vanilla bootstrap and not the bootstrap-vue components.
Make a file called custom.scss. Go into the node_modules/bootstrap/scss directory and copy everything from _variables.scss. Paste these into your custom.scss.
In your style.scss import your custom.scss before you import bootstrap.scss.
Now in your main.js import #/assets/style.scss.
You will need to remove the !default flag from any variables you wish to override in your custom.scss for them to take effect, as well.
Create a file /css/bootstrap-custom.scss, with the following:
// your variable overrides
// modify theme colors map
$theme-colors: (
"primary":#42b883,
//...other variables, you can find them in node_modules/bootstrap/scss/_variables.scss
);
// import to set changes
#import "~bootstrap/scss/bootstrap";
In the main script, import the added file instead of the current imported bootstrap css file:
// import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '#/css/bootstrap-custom.scss';
Reference: Bootstrap, Variable defaults

lit-html / LitElement with sass

How would i go about using something like sass with lit-html / LitElement. Is it possible to do it without having to use an external css file (like ${SharedStyles} in the pwa-starter-kit) with a webpack plugin?
Trying to make the pwa-starter-kit to work with it without having to switch to weback or similar.
I have made up a simple loader for Webpack for building Single File Component with the LitElement. You can use PostCSS for your styles: lit-loader
Hope it can help also for a personal custom implementation.

Overriding imported CSS styles in Vuejs

I am pulling in SweetAlert2 into Vuejs into my app using
import VueSweetAlert from 'vue-sweetalert';
Vue.use(VueSweetAlert);
This imports the whole package from the node_models folder. I now want to override SweetAlert2's sass files so I have copied and imported them into my local sass directories.
However they don't override the node_modules css. How can I configure Vuejs to import and use a plugin but to override the native styling with the copied styles that are in my project without having to put !important all over them?
Try to load your custom css files after the VueSweetAlert import like:
import VueSweetAlert from 'vue-sweetalert';
import '<path-to-your-custom-css>.css';
This seems like a hack or workaround, but it should override the defined css rules in vue-sweetalert.

Categories