I need to write SASS code in a strict arrangement order (e.g. z-index before display before background...). IntelliJ offers custom CSS and SCSS arrangements. Is this also possible for SASS or is there any plugin or cli that ships a solution?
Code rearrangement is currently only supported for CSS and SCSS; if you miss SASS support, please file a feature request to youtrack, https://youtrack.jetbrains.com/issues/WEB
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'm looking for simple module loading for import/export es6 modules transpiled by babel.
Start with es6 source files with import/export modules for use in the browser
Statically transpile this to es5 with babel, with a config specifying whichever module transform (amd, commonjs, systemjs) is simplest to load.
Do not use npm for the modules, nor any other complex workflow. Just babel transpiled files.
Load these es5 files with modules, with a <script> to load a library that the babel transpilation used for loading es6 modules.
I'd like to avoid browserify, webpack, jspm etc. Just simple transpiled es6->es5 and using the library babel compiled modules to. I don't need bundling. We're talking simple, basic javascript here.
Is this possible? If so, how?!
All the module loading discussions I've seen use complex workflows that seem to me to be unnecessary. I'd like to simply use es6 import/export in a set of files and use them as simply as possible in the browser.
Guy Bedford answered this in the SystemJS Google Group:
https://groups.google.com/forum/?hl=en#!topic/systemjs/a7vB2YmdXp8
Here is a talk I gave on it to my team, the details are at the end:
http://backspaces.net/temp/Modules.pdf
The short version is: configure babel to have babel-plugin-transform-es2015-modules-systemjs, run your modules thru babel with just this transform unless you need more of the es6 features (Chrome is 91% complete), and have your html include:
<script src="system.js"></script>
and
<script>
System.import('lib/main');
</script>
No webpack, npm/browserify, jspm, bundling, ... or any other of the (far too) many module workflows.
It seems like you could use babel-cli to do what you want. Perhaps something like babel src --out-dir lib.
Given:
The Swig template engine: http://paularmstrong.github.io/swig/
Webstorm has a plugin for it: Textmate bundles support
A Textmate bundle for Swig is available: https://github.com/paularmstrong/Swig.tmbundle
I expect I should be able to get Swig highlighting fixed, but I'm only getting half way.
Below is the resulted highlighting I get. The Swig code is highlighted as expected, but HTML is not highlighted anymore.
I've tried installing and enabling the HTML textmate bundle as well, but when both the HTML and the Swig bundle are activated, the code is highlighted as only HTML. If I disable the HTML bundle but have the Swig bundle still active, I only get Swig highlighting.
My Question: How do I get Swig code and HTML code highlighted in the same file in WebStorm on Windows?
Result:
This is my Textmate Bundles configuration in WebStorm 9:
Again, simply selecting the HTML bundle to enable it doesn't work.
Swig has nearly identical syntax to Twig, so we can assume they can be used interchangeably speaking of syntax highlighting and code completion.
The thing is that PHPStorm it has a Twig support throught a plugin (which is awesome BTW), but sadly it is not available in the others IDEs thought the Plugins menu.
This issue can be solved by:
manually downloading the plugin from the official repo at https://plugins.jetbrains.com/plugin/7303?pr=
then installing it manually thought the Plugin interface,
then or use the .twig extension on files or adding a new mapping in the File Types system menu for the type Twig, with wildcard *.html or *.swig, how you prefer.
I'm using the *.html workaround and work like a charm, both Swig & HTML syntax highlighting + code completion.
Hope this helps you like it did to me :)