Develop Reference

How do I use different CSS reset stylesheets through CRA?

There is a section in create-react-app about adding a css reset.
From what I understand, CRA includes PostCSS Normalize as a dependency, and all you need to do is create a css file and add #import-normalize; to it, and you will have normalize.css. (By the way, my editor gives me "Unknown CSS at-rule" with this #import-normalize).
What I want is a reset that includes having the margin on body be zero. I can't even tell if the reset is being applied just by looking at my app. I just want to make sure: this setting is not actually included in the normalize.css that is included by following the instructions?
Also, where can I find an explanation of what #import-normalize means? I haven't seen this syntax before.
Finally, is there a way through CRA to use a different reset file, or should I just install another one and import it as usually done?

Here is a bit of background on normalize.css
http://nicolasgallagher.com/about-normalize-css/
With CRA you can normalize/reset CSS with any method you like. You just need to create a stylesheet with the reset/normalized CSS rules in it and import it into App. i.e import './myCustomReset.css
or you can also add the reset CSS file to the public folder, and add it as a link tag to your index.html. i.e <link rel="stylesheet" href="./customResetStyles.css">
I tend to use https://gist.github.com/DavidWells/18e73022e723037a50d6 whenever I need to reset styles instead of just normalizing.

Include CSS and JS library into vue spa component

so i am working on vue spa project and want to integrate ckeditor5 into it. so i just npm install ckeditor5 vue version from here and everything works fine by following instalation guide on the github site.
but after using it, i realize that i need to make custom build from there and thats mean i need to fork the build and clone it and do something on it and then npm build and then add it into my project
well the problem is i don't know how to include those css and js to my vue spa component (i only need it on specific component so i don't find any benefit by putting it avaiable on global by just adding css and js file to the html)
so how to add it on the specific component on vue spa?

Haven't tried this myself but as for the css this should work:
<style lang="css" src="path/to/some.css" scoped>
Or
<style lang="scss" src="path/to/some.scss" scoped>
You can add as much css files (style tags) as needed on your vue template... also, if you don't need this css to be scoped (just available in the component, not in children or parent components) just remove the scoped attribute.
And for the JS, you may load it with: require('path/to/some.js');
or if you need to assign it to something in the window object: window.numeral = require('numeral');... that's an example using the numeral library...

Removing imported CSS on component end

I have many components that import hosted css files as follows:
<style scoped>
#import 'https://test.com/path/to/my-stylesheets/styles.css';
</style>
What I am wanting is a way to remove these imported stylesheets on an end lifecycle hook such as beforeDestroy.
Is this possible?

What you're trying to do depends on vue-loader (if you're using webpack) and it looks like a counter intuitive. So, there's no reason for styles to be removed from document. What you can do is to define your CSS classes in stylesheets or as a data variable in viewmodel and assign/remove those classes during Vue component's lifecycle like beforeCreate/beforeDestroy etc. if you like.

import css using webpack in react

I was from angularjs, now picking up react. Even I was using angular 1.x which is already component based, but it still has template. But in react the file structure and the way we use to code front end has changed, like instead of spiting files by pages, u make files by component now. It promotes reusability but does that means how we apply the css also changed?
I saw this import { navBar } from 'styles/navbar.css' in navBar.jsx. Hmm how does css work together with JSX? doest navBar css load that file? What webpack plugin is needed for that? does it come from default? I'm using react-create-app by facebook so I didn't know much about config.

You use css-loader and style-loader to include CSS files in your webpack bundle. By default it generates some JavaScript code that creates a style element with the contents of the imported CSS file and appends it to the head element in your index.html.
So you can definitely use external CSS files to style your React components, just make sure that every CSS class is properly namespaced to avoid naming conflicts with the classes of other components.
For example you could adopt the BEM naming scheme. If your component is called NavBar, then the root element of that component might have a className of x-nav-bar (the x prefix is there to avoid clashing with frameworks like bootstrap), and all child elements, if they need to be styled, will then have class names like x-nav-bar__${childName}.

This kind of import { navBar } from 'styles/navbar.css' is not relevant to JSX but to css-loader. This is a webpack loader that handles css, and it supports cssModules, that allows you to encapsulate selector names in order to avoid css leaks.
So, shortly, that import exposes an object with mapping between your selector to unique string (usually an a hash).
For example:
// styles.css
.foo {
color: red;
}
.bar {
color: green;
}
// Component.jsx
import styles from './styles.css';
console.log(styles);
/* This will print something like
{
foo: '_h234jh',
bar: '_234m23'
}
*/

Adding an old static page into a rails app without breaking CSS/JS

I am working on a complete overhaul of an old, static site that I had put together. The overhauled app is being built using Rails (4, Ruby 2). I would like to include the old static site in the new app and have it accessible by visiting either www.classic.my_site.com or www.my_site.com/classic, however, many of the CSS class/ID names (utilized by both CSS and JS) used in the old and new sites overlap with each other, so adding the old css and js files into the new app would completely screw things up.
What is the easiest way to add the old site's files (it's only 3 files: index.html, custom.css, and my_js.js, in addition to a few images) to the new site without having to go through and rename all of the css classes and id's?
Is there any reason/convention to go with one URL over the other (classic.my_site vs. my_site.com/classic)? If classic.my_site is the way to go, what is the best way to implement this?
Thanks!

Disclaimer: I may be completely off with this and it might not be best practice.
So, Rails 4 automatically includes the 'sass-rails' gem to your project. If you're open to converting your files to scss files, you could simply create two different parent classes:
One that encompasses your old stylesheet
Another one that encompasses your new stylesheet
For example:
Old style sheet
.old-stylesheet-parent-class {
//Copy all your old styles in here
.main-block{
background: blue;
font-size: 12px;
}
}
New style sheet:
.new-stylesheet-parent-class {
//Copy all your new styles in here
.main-block{
background: red;
font-size: 16px;
}
}
Your markup (old static page):
<html>
<head>
<title>My Old Page</title>
</head>
<body class="old-stylesheet-parent-class">
<div class="main-block">
<p>Hello World!</p>
</div>
</body>
</html>
If you encompass your old & new styles within the parent class, the styles shouldn't stomp all over each other anymore. Again, there might be a better way of doing this but this method is a very quick solution and requires little to no effort.
Good luck! Hopefully this works.

Alternative solution:
I think this should do the trick! Look into loading a specific stylesheet and javascript depending on the controller.
I know you're working with Rails 4, but these threads should help.
This one is controller specific stylesheet.
Controller specific stylesheets in rails 3: Inheritence
This one is controller specific scripts.
Rails 3.1 asset pipeline: how to load controller-specific scripts?