I am using create-react-app for a new project. I have installed node-sass and everything is working. I have one variables.scss file in a styles folder that is at the root of the src folder. I want to be able to use the variables in this file across all the component style files of the app.
I don't like the approach of importing the variables.scss file to each component's scss file. I want to be able reference the variables anywhere in the app and get the values. But so far, I have not been able to find a good resource that shows how to do this without ejecting create-react-app.
- src/
- styles/
- variables.scss
- App.js
- App.scss
- features/
- home/
- home.scss
- Home.js
- index.js
- index.scss
For instance, if I need to use a variable in the home.scss file, I should not be importing the variables.scss file. Instead, I could just reference the name of the variable.
Please let me know what is possible.
Related
Is it possible to use webpack to compile a directory of scss files to a directory of css files?
I don't want to use the sass command line tool because it's part of an angular project and with the help of custom builders I can run the webpack script with only ng build
e.g.
- src
- themes
- theme-dark.scss
- theme-light.scss
to
- dist
- themes
- theme-light.css
- theme-dark.css
Hower I think this is currently not possible because webpack seems to need the scss imported in javascript and not in single files and writes the generated files to js and not css.
Is that what I want even possible with webpack or do I need another tool?
You can use Sass compiler to compile scss to css with a single command. Exactly the use-case you are looking for.
sass --watch src/themes:dist/themes
watch will compile on a file change (optional)
I am having a problem using Encore webpack in my Symfony 4 project.
I currently have all my files css / js / scss / images in the public folder.
And in this one I have a sideBar folder that contains folders that contain files themselves:
And it can happen that in some of my files like the "main.css", at a time, I use other files thanks to the function url ():
example :
.sidebar-bg.bg1 .sidebar-wrapper {
background-image: url(../img/bg1.jpg); }
And since this is the first time I really use WebpackEncore, I have difficulties to know what strategy to adopt to be able to gather all this.
Do I have to create an app.js file in which I will import all the files from my sideBar folder one by one?
You have two possibilities, first one you can import as your said all files in one file "app.js" for example. This file is your "entry" in your Webpack Encore config file (https://symfony.com/doc/current/frontend/encore/installation.html)
The second option is that you can add multiple entries in your Webpack Encore config file (best practice is one by page) and in each one import some of your files when needed:
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
We're using a bunch of global styles and imports in our angular-cli-generated Angular application, defined in styles.scss (the file starts with /* You can add global styles to this file, and also import other style files */ if that seems familiar).
However, when this line is added to the top of the file:
#import '~#company/company-wide-styles'
the webpack builds produce bundles that are megabytes in size. The import refers to a 1120 lines long css file (compiled, unminified).
It might be relevant that we have ejected the configuration since we will need to customize some settings shortly that angular-cli didn't support yet. The ejects were performed with the following commands:
ng eject --aot -e dev -dev
ng eject --aot -e prod -prod
and the config files were then used in the respective builds.
What could be causing these huge file sizes? With the import line the files generated in the build are at least doubled in size!
The company wide styles are downloaded with yarn from a local registry set up with artifactory, but they sit happily in node_modules just like any other package, so I don't think that's relevant to the problem.
It turns out we had a lot of unnecessary imports in our scss files. In almost every single file, the entirety of the global styles.scss was imported. I can only conclude that this led to massive code duplication across the app.
Replacing the imports of the big global file with more specific files (for variables and mixins) reduced the bundles to a normal size.
I've got a Meteor project with the following file structure:
.meteor
client
dashboard
dashboard.scss
client.scss
My basic sass file is client.scss that resides in client folder.
If I define $flat-button in client.scss. Then I cannot use it in dashboard.css without adding import '../client';. However when I do this in multiple files this causes duplicate entries in the unified css file. If I don't import it then Meteor reports errors due to not finding the variable.
Should I add settings to the sass compiler to get this working?
If you're using the fourseven:scss package to compile the Sass in your Meteor project, you simply need to prefix the filenames of your imported .scss files with an underscore, which is the standard method of naming a partial stylesheet with Sass.
In your case, your folder and file structure should be changed to:
.meteor
client
dashboard
_dashboard.scss
client.scss
And then you should be able to use an #import statement to include _dashboard.scss in client.scss like so:
#import 'dashboard'
If for some reason you don't want to rename your files that way, you can also use the .scssimport extension for the same result.
Hope that helps!
Can I compile scss from project folder created with foundation new project with sass?
Why js folder had only app.js file, should I move files from bower_components/foundation/jsto (root)/js or link to their folder?
Should user css settings includes in app.css or custom file that includes app.css?
In bootstrap sass files collected in one folder, why in foundation scss folder had only app.scss and other files in bower components.
When you install Foundation this way, you use the SCSS folder created that contains the _settings.scss & app.scss. The app.scss is what you tend to use as your base SCSS file to compile from so you'd include all your other SCSS files to this one. You can move this file to elsewhere if you please but move the config.rb with it and make sure the add_import_path works from where you move it to.
You don't need to move the files, everything in bower_components should never be touched or moved, they are there so they can be upgraded when necessary, you shouldn't have to touch base Foundation files.
I said before you should use that, but you could include the app.scss into a custom scss file but it's better to have control of the Foundation imports in 1 file, in my opinion.
For the same reason i mentioned in 2, so you don't touch them and Bower can easily update them if you require.