Can I import all .scss files in a sub-directories with node-sass?
I'm guessing it would be something like this?
#import './directory/**/*.scss'
No, there is a request on the Ruby Sass GitHub repository for this functionality, but libsass/node-sass won't implement functionality not in the main language. You may be able to find plugins that do this.
Related
I'm currently building an npm component library and i'm using a rollup bundling process to compile the library for distribution. The css for the project is written using SCSS, but it also depends on Bulma, which is a css framework written in SASS.
What I would like is to be able to bundle the bulma source code along with my custom scss all into one scss file that I can then use in other projects. That way I can still benefit from the features offered by scss in those projects, such as variables and mixins for example.
I would like this to be automated during the build process so that I don't have to worry about it while developing new components. I've looked at many npm packages for bundling scss files but none of them support SASS and SCSS together. I've also tried converting my project entirely to sass but there doesn't seem to be any good support for sass bundling in general.
So for example, I may have a main.scss file that looks something like this:
#import "~bulma/bulma.sass";
#import "./utils/variables.scss";
It imports both sass and scss files together. This is something that is supported by the sass compiler, and I can compile this to a bundled css file without any issues. But there does not seem to be any support for bundling into one scss file.
The two main NPM packages that i've been attempting to use are:
scss-bundle & bundle-scss
scss-bundle is great, but it doesn't seem to have SASS support, so that's a no-go with Bulma.
As for bundle-scss I converted my project to use SASS and configured the package accordingly, here's the config is used:
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
From what I can tell, this should go through all of the files in all of the subdirectories of both my styles folder and the Bulma dependency folder and compile them together into one bundle.sass file. And although I would prefer the configuration options from scss-bundle, this is essentially what I am looking for.
However it doesn't work. The package can't seem to resolve the #import statements within the SASS files. Regardless of the syntax I use. And even if it was based on syntax, I can't change Bulma's syntax. Could it be that I'm using the wrong globbing pattern in the mask option? Or does this package just not work?
So my question is, and TLDR:
Can I bundle SASS and SCSS together into one file using some NPM package?
If not, is there a simple and automated way for me to transpile SASS to SCSS and then bundle them together?
If neither of those are possible, is there a working npm SASS bundler that someone can direct me towards? Because bundle-scss does not seem to work.
Also, I am aware that I could just import Bulma separately into the project that needs it, but i'd really prefer to have it all come down together in one package.
Thanks! I hope I explained everything clearly!
I've got a frontend project which is using Sass and Bootstrap 4.5. Currently my Src-Code looks pretty much like that:
#import '../node_modules/bootstrap/scss/functions';
#import '../node_modules/bootstrap/scss/mixins';
#import '../node_modules/bootstrap/scss/type';
#import '../node_modules/bootstrap/scss/images';
//...
.myWrapper {
#import 'my_stlyesA';
#import 'my_stlyesB';
//...
}
The resulting/compiled myproject.css will get used within my html.
Objective:
So now I want to integrate support for RTL. The frontend should be dynamicly change from LTR to RTL if user clicks on a button.
I've found that rtlcss.com seems very popular. It also provide a already RTL-supporting "forge" of Bootstrap as a minified CSS file. But I want to integrate it into the above descriped sass construct (and also want to keep managing my dependencies with NPM; rtlcss only offers CDN).
How can I integrate RTL support in my Sass website?
I've got a running Vue app created with Vue CLI 4 and also installed Tailwind CSS with the help of this tutorial. Since I want to put my custom components into single files and write them in SCSS, my tailwind config file looks like
// tailwind.scss
#tailwind base;
#tailwind components;
#import '#/assets/scss/components/button.scss';
#tailwind utilities;
While serving the app with vue-cli-service serve or building it with vue-cli-service build works great, I am missing the autocompletion feature of my IntelliJ IDEA for all the tailwind classes so that I don't have to use (even tough great) cheat sheets like this.
My idea is to introduce a npm script that will build the full tailwind.css, so that the IDE can utilize it when autocompleting css classes. I know that I can manually build such file with npx tailwindcss build tailwind.scss -o tailwind.css.
However, although that gives me autocompletion for the built-in tailwind classes, it of course neither compiles the SCSS in my custom components nor does it resolve the #import at all. A solution could be to 1) resolve the #import, 2) compile the SCSS to CSS and 3) use the aforementioned tailwindcss build to finally build the full tailwind.css.
Since I am very inexperienced with Webpack, I wonder if you can give me some hints of how to achieve this. Would you even use Webpack for this task?
Webpack is definitely the way to go here, I use this config all the time. See the Tailwind documentation page for setup documentation with webpack
Don't worry about autocomplete for Tailwind, you will learn those classes in no time plus their docs and search function on there are brilliant, no need for external cheatsheets imho.
If you're using post-cssimport you need to put the #import statement before everything else. Check out https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports
Just added the package normalize-scss to my new Vue project, but none of the styles are being applied... I've tried both:
#import 'normalize-scss' in my styles.scss
import 'normalize-scss' in my main.js page
Am I doing something wrong? The package is clearly there because the app runs, but it doesn't actually apply any css rules.
I figured it out. You need to put the normalize() after you import it, in your main.scss file. So:
#import 'normalize-scss';
#include normalize();
after installing it with npm import it at the top of main.js file:
import "normalize.css"
If you have a main/global scss file you already use:
Add normalize.css (any of these) to your project: yarn add normalize.css (or npm)
in your main.scss for example: #import '~normalize.css';
Note the ~ for ambiguity as cli docs say: https://cli.vuejs.org/guide/css.html#referencing-assets
Not sure if this is the correct way to do this but, if you are using vue-templates maybe you can try to import the style doing this:
<style lang="scss">
#import 'src/assets/css/mycss_lib.css';
</style>
Also remember, do not use scoped in the style-tags. You also need, scss loader and node-sass to make this work.
npm install --save normalize-scss
In main scss file #import "normalize-scss/sass/normalize/import-now";
Rails 3.1 introduces a new way of organizing both JS and CSS with the introduction of manifest files. For example, application.js might look like this:
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require_tree .
This will grab various bits of Jquery, all of your own JS, concatenate them together and serve it as a single file to clients. Simple enough.
Unfortunately the picture is not so clear to me with SASS. SASS already has concatenation built in using #import.
Should I change all of my partials into full SASS files and then concatenate them using the manifest file or continue using #import? Why?
Sprockets converts all imports to CSS before concatenating, so it can't be used to share mixins and variables across files. I'm guessing this is going to stay that way just because you can import SASS, LESS and CSS files via that method.
So here's how I do it:
If I have ERB to include (mostly for asset_path() calls), I put them in my main file, application.css.scss.erb
If I have vendored CSS I want to include, I require it via Sprockets, e.g. //=require jquerymobile
In that same file, I use the SASS #import command to explicitly load all files. None of the #import'ed files may be .erb though.
load the basic stuff (e.g. reset) and imports with mixins
declare variables
import the specific styles
Here's how my app.css looks at the moment. Don't forget the ";" and the quotes:
// Using SASS import is required for variables and mixins to carry over between files.
#import "reset.css.scss";
#import "mixins.css.scss";
$color_base: #9b2d31;
$color_background: #c64e21;
// Using asset_path is important for browsers to use versioned url for the asset.
// This lets us do aggressive caching.
$logo-url: url(<%= asset_path("logo.png") %>);
#import "application/layout.css.scss";
#import "application/sidebar.css.scss";
#import "application/videos.css.scss";
#import "application/pages.css.scss";
...
Note that I'm still exploring the Rails 3.1 asset pipeline, so your mileage may vary. I'll try to come back & update if I find anything else interesting.
The best way to solve this is to use the native #import directive as explained here: https://github.com/rails/sass-rails#important-note
This question was already answered here : how to use sprockets imports with sass
Hope this helps! :)
The sass-rails gem explicitly states not use the require syntax with SASS files - use SASS's #import statements instead.