Im developing a website using gatsby.js and want to scope my styles to avoid global class name clashes between my react components. I started to use css modules but I would prefer to use the react-scoped-css package as it allows you to remain using string based classnames.
I can only find instuctions for how to use react-scoped-css with a create-react-app setup, but I want to include this package within my gatsby project. Could someone tell me how to add this package as a gatsby plugin?
I think you are looking for gatsby-plugin-sass-scoped. To use it by default (without options) just add it in your gatsby-config.js:
plugins: [`gatsby-plugin-sass-scoped`]
Then import the scoped CSS (SCSS) file with the .scoped notation:
import("./component/index.scoped.scss")
Disclaimer
There are a lot of missing details and configurations in the question and since this is not an official package it may be discontinued or incompatible with your current Gatsby version or its dependencies. If so, consider using --legacy-peer-deps flag when installing.
Related
I've been creating a small website using NextJS. I used formik and google-map-react to validate a form and show a basic map.
IE11 is "not cooperating" in using these libraries. I've tried changing the babel config and used the next-transpile-modules package to try and provide polyfills and transpiling of the node_modules packages without result.
Any push in the right direction will be greatly appreciated!
Kind regards
After further trial and error, I found the package google-map-react to be the problem. Removing the component that uses this package solved the formik/yup errors.
With regards to google-map-react, I removed this package and used the native google maps api package (#googlemaps/js-api-loader => see documentation for usage).
To get nextjs to transpile both packages from the node_modules, the next-transpile-modules package was added and used within next.config.js.
In the end all I had to do was edit my babel.config.json file, the next.config.js and package.json file.
Below are images of what they look like now.
babel.config.json
next.config.js
add this line to package.json
Keep in mind that #babel/core, #babel/preset-env, core-js need to be installed.
I hope this solution is helpful to anybody experiencing the same problems. I also changed the title since formik wasn't the problem.
I am new to bigcommerce stencil theme.
Any one have any idea about how to integrate bootstrap in stencil theme for local development. is it possible to integrate custom css and js to stencil theme ?
This is frankly pretty complex but the starting direction you should work with is to remove #bigcommerce/citadel and foundation-sites packages. Delete ./assets/scss directory if you are willing to rewrite rather than refactor existing scss. Refactoring would be necessary due to dependence on Citadel.
You'll need to install some dependencies to work with bootstrap in conjunction with webpack.
npm install bootstrap-loader bootstrap-sass url-loader imports-loader --save-dev
bootstrap-loader
bootstrap-sass
url-loader
imports-loader
For bootstrap to use jquery and to allow babel to polyfill stencil-utils and the asset directory, you will need to modify the webpack.config.js file.
You may also want configuration option which bootstrap-loader can provide and you'll need to ensure dependencies are properly imported to .js files.
You can get some partial details here: https://medium.com/#victorleungtw/how-to-use-webpack-with-react-and-bootstrap-b94d33765970#.85qo3a7dr
Go to storefront > Footer scripts and add your bootstrap script there. It will work fine.
I am learning Mantra style guide (https://kadirahq.github.io/mantra/) to use with meteor. What puzzles me is what is the "correct" way to use external template with meteor and mantra? in example css and js files. I know that in meteor one can create a package and load it.
But should one also do the same in meteor + mantra, i.e. create a package as https://github.com/kadirahq/mantra/issues/53 suggests? Will meteor then load all necessary files (css or js) correctly? Or is there a better way?
Best Regards
Mantra follows modular structure. Your code will be in the form of module doesn't matter its UI related or not. It will load things like meteor application but application will start from starting point you have defined.
Yes you can create a package and load it from there but when you have npm package in your hand which you can directly use in you modules, I think creating package will be a bad idea for that.
In the project with mantra I had worked, we used rebass. We had created some common components for UI purpose only and added them to a separate module and exported them from index.js. In every module we called components from that module and used it whenever required. Better way is to use npm packages so that you wont have to worry about loading JS.
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..
Finally getting around to learning front-end development with sass and I'm using bootstrap-sass-official (installed via bower) in an AngularJS project. Id like to try out AngularStrap in this project as well but it's dependency on bootstrap's CSS means I am loading both the standard CSS version as well as the SASS version of bootstrap. Can I use AngularStrap with bootstrap-sass without also requiring the standard CSS?
Bower will require the standard bootstrap.css with the installation of angularstrap. Once it is installed, remove the reference to it from your index.html file and you're all set. Thanks to Remco Haszing for the answer!