Can someone please tell me if it is worth using Sass/SCSS with React?
I finally set up SCSS to work with Create-React-App without ejecting, but it doesn't seem to work well since it is recommended to use CSS modules with each component.
How would I go about sharing variables, mixins, etc. Is it better just to use CSS?
Any help would be greatly appreciated.
The 2. version of create-react-app supports Sass now. Install node-sass (e.g. npm install node-sass) to enable it. For further instructions, check out the documentation. If you need an example, check out this application's Navigation component.
I highly recommend using scss, as you can still use CSS-Modules with SCSS.
I'm not familiar with the create react app setup, but usually you'd configure webpack with style-loaders like so:
{
test: /\.scss$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } },
'sass-loader',
],
exclude: [srcDir + '/assets/scss/']
},
The loaders will execute backwards, starting with the sass-loader which will transpile your scss to normal css, then with the css-loader and the option "modules: true" these styles will be made available to use as modules.
Of course it could look a bit different but that would be the basic approach to use css modules with scss.
To share variables and mixins I always use a global scss file, which will be required in the app (e.g. in the app.js). However you'll still have to import that file/s in every component-scss where you need the variables and mixins.
// GLOBAL STYLES
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
],
include: [srcDir + '/assets/scss/']
},
Alternatively you could use PostCSS-Properties to make your components even more flexible (e.g. to provide different themes for your app, without explicitly importing the files in your component styles) but afaik those are not supported by IE and would require you to add specific postcss loaders.
see http://cssnext.io/features/#custom-properties-var
The flexibility and maintainability that SASS provides is very useful for big projects especially with react.
However, don't let yourself be influenced by my or the opinion of others - you're free to use the things you're most comfortable with and should always question the way things are done.
create-react-app V2 corresponding section doc: (support out of the box)
https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
Using Sass/SCSS is pretty much completely unlinked to React. Sass is compiled to regular CSS, and then you use it as such within your HTML or React.
As for sharing variables, when you use #import it basically just takes everything from the file your importing and pastes it in, so you could just make a _variables.sccs file and import it into each file where you want to use your global variables.
//variables.scss
$primary: red;
$secondary: blue;
//main.scss
#import 'variables';
body {
background-color: $primary;
color: $secondary;
}
Related
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 was setting the Webpack loaders config for .css and .scss files, I noticed that when using --mode production I'm getting minimized CSS as the final output without even using a minimizer explicitly, here's my loaders config:
{
// Match .css or .scss
test: /\.s?css$/,
use: [
isProd
// In production extract the CSS into separate files
? {
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProd
}
}
// In development inject the styles into the DOM
: 'style-loader',
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: false
}
}
]
}
I'm using sass-loader with node-sass and mini-css-extract-plugin to extract the CSS into separate files, which suggests using optimize-css-assets-webpack-plugin for minimizing the CSS by overriding optimization.minimizer, but I'm already getting minimized output without installing this plugin.
To find what's causing this behavior I tried processing CSS files with and without sass-loader and I found out that sass-loader might be causing this behavior but it doesn't have any option for minimizing the CSS.
So what's causing this behavior? And do I even still need optimize-css-assets-webpack-plugin if my CSS files are minimized?
Option outputStyle in sass-loader options determines the output format of the final CSS style. Default: nested.
For more detailed https://github.com/sass/node-sass#outputstyle
To disable minification, set this option to expanded:
{
loader: 'sass-loader',
options: {
sassOptions: {
outputStyle: 'expanded'
}
}
}
For minify css i reccomend plugin css-nano. It is flexible in settings. It's good work with postcss-loader.
According to the webpack docs,
webpack v4+ will minify your code by default in production mode.
So it's not sass-loader doing the minification, it's just that removing that means webpack isn't processing your SCSS into CSS and therefore not creating a file to be minified.
I'd say if you're happy with simple minification the default is probably fine for production. Other tools might give you more control over the final output including things like source maps, removing duplicate rules, dumping old prefixes, etc.
I'm using a third-party module in our Vue project called vue-cal, which is for rendering a calendar. You can customise how your date cells look and such, using their custom css like this.
<style>
.vuecal--month-view .vuecal__cell-content {justify-content: flex-start;}
.vuecal__cell.selected {background-color: red;}
</style>
However, we use sass for our project, and I tried rewriting it like below but now the <style> isn't being applied at all. How can I rewrite this in sass correctly, or is there no way to rewrite external libraries' custom methods like these in non-css syntax?
<style lang="sass" scoped>
.vuecal--month-view
.vuecal__cell-content
justify-content: flex-start
.vuecal__cell.selected
background-color: red
</style>
Sorry if this is a basic question - still a beginner to Vue, CSS and front-end in general.
[EDIT] Forgot to mention an important detail. We already use sass-loader#7.1.0, and I've already written some other code in sass for other components. Those are being rendered fine. That's why I'm wondering if it has to do with vue-cal-specific methods.
You need to use vue-loader to pre-process the SASS into native CSS
Step 1:
npm install -D sass-loader sass
Step 2, in your webpack config file, make sure to have:
module.exports = {
module: {
rules: [
// ... other rules omitted
// this will apply to both plain `.scss` files
// AND `<style lang="scss">` blocks in `.vue` files
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
]
}
]
},
// plugin omitted
}
This is the barebones needed. For further information see:
vue-loader documentation
[SOLVED]
It turned out that the problem was not sass, but the fact that the style was scoped. Scoped styles are only applied to the component itself, but vue-cal is an external module so the styles weren't applied. Removing scoped immediately fixed the issue.
I am using webpack 2 and react-bootstrap in my project ; I can't find how to have bootstrap CSS styles properly applied it seems like the .css file is not loaded, no matter which import statement I tried to use.
As far as I understand I do not need the full bootstrap package with javascript etc. since I am using react-bootstrap ; I just need the CSS. So I added this in my main.js file:
import 'bootstrap/dist/css/bootstrap.css';
It seems to work (no error message) but the styles are not applied...
I configured the css loader in my webpack config file as described on webpack 2 documentation.
Any help would be appreciated :)
When setting modules: true in the css-loader, the CSS is locally scoped by default, but you need them to be available globally. The simplest solution is to remove modules: true entirely. You could still use modules in your own CSS files by using :local.
But if you would like to use modules, there are some workarounds to import globals.
Defining separate rules
Instead of enabling modules for all the CSS files, you can make two different rules, that match the desired files. So let's say all CSS imports from node_modules should be treated as regular (global) CSS. The rules would look like this:
{
// For all .css files except from node_modules
test: /\.css$/,
exclude: /node_modules/,
use: [
'style-loader',
{ loader: 'css-loader', options: { modules: true } }
]
},
{
// For all .css files in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader']
}
Of course you can be more specific in what you want to include/exclude, if you don't want the entire node_modules.
Specifying loaders inline
You can specify the loaders in the import and webpack will use those over the configured ones. You would import bootstrap as follows:
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.css';
This is just a quick workaround without having to change any config, but it's probably not desirable, especially when having multiple such cases.
I need my Vue components to inherit styling and variables from other "global" imports.
I do not want to import variables and bootstrap in every single component, this seems very redundant and not best practice.
It is basic usage so Vue must have made the functionality. I have already attempted to create a base component, an "app.vue" component if you will, that has its own styling that includes the variables and bootstrap, but my components can still not access it.
Any idea?
You can do this with webpack's sass loader options that name is 'prependData'. This code will be added top of every .vue file that consist of scss style. I know this is ugly but It works. As bootstrap documentation said. You have two choices about this. One of these is adding whole bootstrap files another one is this technique.
You can check here bootstrap documentation.
// webpack.config.js
loader: 'sass-loader',
options: {
prependData: "#import '~/node_modules/bootstrap/scss/_functions.scss'; #import '~/node_modules/bootstrap/scss/_variables.scss'; #import '~/node_modules/bootstrap/scss/_mixins.scss';"
}
I know of no other way than #import the variables file in each component. Much like we have to import/require the npm libs we use in each component.