I would like to add materialize or something similar to a Foundation 6 Zurb Template build. Is it possible to add just the sass styes? How could that be done?
There is also Material Foundation, but it uses grunt instead of gulp. Would this cause a conflict? How is it added to the Zurb Template? Thank you!
If it's just css/scss, you can just copy the files to your project and import them using sass partials.
// Copied file: _material.scss
#import "path/to/file"; // No file ext or leading _
Edit: Whether or not gulp and grunt conflict depends on how you have things set up. If they both work with the same files I could see them conflicting.
Related
I'm new to PrimeVue and I'm trying to customize/modify the Bootstrap theme. I have a separate project where I completely modified the variables of Bootstrap (v4) and I want to use it in PrimeVue. I want to use SCSS so I can manage the styles well (just import the SCSS file needed in the component). How do I do that? Upon looking at the PrimeVue resources directory, it looks like it doesnt have the scss folder of Bootstrap, and it only shows the css file (generated). Any help is greatly appreciated. Thanks!
Edit: I want to completely modify the variables instead of overriding the PrimeVue Bootstrap classes.
I don't know if it's still relevant, but you can only make changes in SASS variables if you buy the designer license from Primefaces - otherwise you'll get access only to prebuilt files.
See the designer documentation here.
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 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
I've had to go back to an old version of compass: 0.12.7
Otherwise it fails on missing files. Before installing I removed the existing compass installation.
It correctly compiles my css file when I make a change to the scss file.
But when I ask sencha to make a production build with "sencha app build production" the css file in my project gets replaced with a different one.
The file probably gets overwritten at the following line during the build process:
[INF] executing compass using system installed ruby runtime
overwrite ../css/app.css
So it claims to use my installed version of compass.
What am I doing wrong here?
You have the same problem i have met.
Sencha touch 2.4.0 SASS compile error
You should not write your custom css in app.css.
IMHO, there are two ways to add custom css.
1. app.json
2. #import your custom scss file in app.scss in resource/sass/app.scss and then use sencha ant sass to compile css file.
I have installed Bootstrap with Bower in my project
bower install bootstrap
There are several LESS variables that I'd like to override
- less/modals.less (some transition effects)
- less/variables.less (colors)
I don't want to change anything on the bower package so it can be upgraded later.
I'd rather not like to have to redefine an entire Gruntfile for my small modifications.
What do you suggest me to be able to build my bootstrap with Grunt taking my variables keeping the ability to upgrade it with Bower later ?
You can change bootstrap.less. change its #import directives with new .less you want. (Gruntfile.js has reference to variables.less, so I think this option is not what you are looking for).
Or extract (or override) variables you changed from files and to separate .less file(-s) and add new #import to bootstrap.less file.