I am using CDN Buefy and I want to change some colors, is there a way to do that without needing to install Buefy through npm?
Related
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.
I am using Tailwind CSS Play CDN for local development, and would like to use PostCSS to build a production version
Basically every time I need to manually replace the following line in index.html
<script src="https://cdn.tailwindcss.com"></script>
with
<link href="/dist/main.css" rel="stylesheet">
before pushing to production site
What is the best way to do that automatically each time I publish the website?
Quotes from tailwind docs
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
So you need to use build tools like webpack, Rollup, Vite, and Parcel
Tailwind CSS with Parcel
Using Postcss
I want to use the css/sass built-in feature in Next.js while I want to add less configuration.
The css/sass built-in is fine but as soon as I add less to next.config.js, it disables the feature so I have to configure them like before one bye one using:
#zeit/next-sass
#zeit/next-less
#zeit/next-css
Is there a way to keep the feature enable while adding just less config?
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. after adding less configuration!
Next.js disables all built-in CSS support if you have any custom CSS preprocessor.
So, if you add a custom plugin to process Less and need support for CSS and Sass, you would have to setup those plugins as well.
Next.js webpack config source code
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.
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!