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
Related
I installed all of steps of Taiwlind but not working. How i fix it.
I just want to install to my project tailwind
There could be many reasons why Tailwind is not working in your project.
Make sure that you have installed Tailwind using the correct command in your terminal or command prompt, depending on your operating system. You can use the following command to install Tailwind:
npm install tailwindcss
Check that you have created a configuration file for Tailwind in your project. You can create a configuration file by running the following command in your
terminal
npx tailwindcss init
Ensure that you have included the Tailwind CSS file in your project. You can include the file in your HTML or CSS by adding the following line of code:
scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Check that you have properly configured your build process to compile your CSS code. If you are using a build tool like Webpack or Gulp, you will need to configure it to compile your Tailwind CSS code.
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 have this really simple webpack projects in with I now want to also use bulma a css framework.
I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:
import bulma from '~bulma/bulma.sass';
I also tried using a specific sass part, which also did not work:
import bulma from '~bulma/sass/base/_all';
Can you help me get this working or maybe point me in the right direction?
You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line:
test: /\.scss$/, to test: /\.(sass|scss)$/
I'm using sails(http://sailsjs.com) to develop a little platform. Everything goes smoothly following the documentation. But being new to this javascript frameworks world and npm etc etc, i've been having a trouble including other node_modules and use them in the .ejs views...
I understand not all modules are to be included in the views but how can I manage to include some?
Trying to use https://www.npmjs.com/package/vue-slider-component
Thank you in advance and sorry if this error is just plain out stupid.
Your confusion is understandable. The issue is that, until relatively recently, things installed in node_modules were solely for use in the back end code; that is, your Sails.js controller actions, models, etc. After all, the node_modules folder has the word "Node" right in it, and it was created for use with NPM (the Node Package Manager) to help organize Node (i.e. server-side JavaScript) files!
While many front-end plugins were (and still are) published on Bower, newer frameworks like Angular 2 and Vue often publish their plugins to NPM because it reduces the number of moving parts for your app. The problem is, if you try to require('vue-slider-component') in your server-rendered .ejs view, the server (i.e. Sails.js) will try and load and run that code before it renders the view, where what you really want is for that plugin to run in the browser.
The long-term solution is to use something like Browserify or Webpack to compile all of your front-end JavaScript files into a "bundle". So for example if you have a file like assets/js/my-vue-app.js that includes the line:
import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
then Browserify will see that line, load up that vue2-slider.vue file, add it to the top of the my-vue-app.js file, perform some other magic, combine it with your other front-end .js files and output a file like browserified.js which you would then include via <script src="/path/to/browserified.js"> in your HTML.
Since new Sails apps use Grunt to organize and inject those <script> tags into your views for you, it can be kinda confusing as to how you would get something like Browserify or Webpack to work with Sails. For Sails 1.0, there's a seed project for using Webpack instead of Grunt. For Sails v0.12.x, you'll have to Google around to find some examples of using Broswerify or Webpack with Sails.
A short-term solution, and probably not as maintainable in the long run, is to save the contents of the minified vue-js-slider component into your assets folder (e.g. as assets/js/vue-slider-component.js), add it to your HTML with <script src="/js/vue-slider-component.js"> and access it in your code as window['vue-slider-component'].
I use less.js to code my css. When I build the project (grunt-server, grunt), the grunt-contrib-less plugin converts the less.js style to my main.css file. I only include this file in my index.html.
This works great for deploying, but for developing not so much. I need to build the project or run "grunt less" to view changes of my css.
I'm guessing there is an easier way of doing this, but i'm new with the grunt en yeoman stuff so I don't know where to look.
I recommend using grunt-contrib-watch, together with grunt-contrib-less.