I'm looking to install Webpack4 for a project.
Part of what I want it to do is lint css.
Just about every resource I find points to "stylelint-webpack-plugin" (https://github.com/JaKXz/stylelint-webpack-plugin).
That project's not been getting updated for a long time.
From what I can tell the webpack team bullied the dev responsibile for lots of the work on stylelint-webpack-plugin right out of the community.
So now the project's got nobody doing the work and it's "looking for a maintainer". After that whole mess, doesn't look like anyone's signing up.
From my perspective -- Oh Well! Next !?
Is there a different alternative to stylelint-webpack-plugin for lint-ing styles in a webpack setup?
The stylelint-webpack-plugin now belongs to the official webpack-contrib GitHub organisation. The plugin's dependencies are up-to-date and it supports the latest version of stylelint (version 9).
I believe it is the still the most appropriate plugin for using stylelint within Webpack.
Related
I am doing an online course on Advanced CSS and Sass and found out that the way it is shown in the course is a bit outdated.
The course uses node-sass in the dependencies, which is deprecated. A direct alternative to this would be to use Dart-sass (I will write my steps to do so in the end, maybe someone will benefit from this :))
Another alternative is to use the VS Code Extension "Live Sass Compiler". It seems that this option is quite well accepted.
However, I wonder what benefits and differences these options have. E.g. I had some troubles with the extension yesterday and then used the dart sass as a dependency and solved my problem this way. Maybe this was due to something wrong in my code, but still, it left me with this question and I think others might have the same in the future.
PS: It is my first question here, don't roast me if I did something wrong :D
For those interested in how to change the code from node-sass to dart-sass here are the steps (at least for me these were the steps in the course I did):
Install dart sass using the command line: npm i -D sass
Change your scripts where it says node-sass to just be sass (in package.json)
Change the -w in your watch:sass script to --watch (in package.json)
You can also do npm uninstall node-sass to get rid of it
I do not know what exact tutorial you are looking at. Also, I am not so experienced at the front-end, but in my opinion, using Sass as a css-preprocessor isn't the best option on production for now.
But, since you are asking how to implement sass, I'll describe a procedure, like you are using React with npx create-react-app.
First, you were right, about using dart-sass over sass. This command should help you with that: npm install --save-dev sass. According to the question, seems you already tried that.
After that, add new script to your scripts in your package.json file: "sass" : "sass src/Sass:src/Css --watch --no-source-map" and you are done.
In my own opinion, I prefer to implement it via npm instead of VSC plugin. It will more stable after all. But if you are using it, for test/study purposes, I think, you could try both.
If you want to use the most actual version Dart SASS with 'Live Sass Compiler' you need to take care about the version. The most popular version is not supported for years so it does not support Dart Sass.
But there is a fork which is supported and as fork you can use same settings.
To your Question about NPM and Live Sass Compiler: both are Javascript Version off Sass. As Javascript versions they are not as fast as if you install SASS direct on your System. The difference between Javascript vesion itself its not as big. So I think the best choice between NPM and Live Sass compiler is to use Live Sass Compiler (the forked version!) as it is integrated to the editor and easier to use direct from there.
If you need a faster solution you really should install the original version. That is not as difficult as it sounds. And there is a VS Code Extension as well wich make it possible to use that original installed version easy direct up from VS Code.
Detailed Information:
Install SASS direct on your system:
https://sass-lang.com/install
Information to the named VS Code extension:
https://stackoverflow.com/a/66207572/9268485
Here is my problem, I am trying to create an e-commerce with the sylius framework which itself is based on symfony.
In the documentation, it says that the best way to download assets and therefore personalize your store is
to use webpack encore. So I followed the steps described in the doc by having composer require symfony / webpack-encore-bundle
then yarn install but unfortunately, when I have to do yarn encore dev, I have a problem. Note that at the time of yarn install, dependencies do not install correctly.
After doing research on the net, I understood that there is a conflict between yarn and gulp which is installed by default in sylius and that to correct the problem,
you must erase all traces of gulp. Personally i think this should not be the responsibility of neophytes. I found on github a branch of sylius without gulp called bye-bye-gulp I tried to clone it but impossible to work with.
If there are people who know how to hack this problem or better, people who have already passed this stage, please come to my aid.
thank you in advance
Welcome to SO Markus,
This is not a proper question for stack overflow, please read the guidelines. You might want to post your different webpack.config.js (the one in your theme folder too) to start with so we at least have some code to look at. It worked pretty easily for me on my current project based on Sylius 1.7, what tutorial are you using ?
So have created an ASP.NET 4.5.2 project and now need to install react and typescript. I installed node.js so wondering if its best to install via that. Also because I will be using TypeScript I will need the .d.ts files is there an easy way to install these in the project locally? Cause I assume everything else will be installed globally by npm as I might use them in other projects?
One other thing I am confused by all the different types of react packages available on npm, do i need a few or just one of them? I have worked on many projects involving this kind of tech stack but they are established and have never created one from scratch like i am doing now. So some really informative links or tips here would be immensely helpful! :)
So using Visual Studio 2017 I followed this tutorial and managed to get it working. The only issue left now is that i need to call webpack cmd on the project root when i make changes before refreshing the site. I am fine with this and will look into further into automating it as it kind of is a different and unrelated question.
One thing I will include is to always install npm packages globally (most of the time anyway) and just link them in using npm link. Was quite useful considering I went through the process a few times creating the project from scratch over and over again until I understood it all.
I am using CSSLint via the CLI. I have spent quite a bit of time following the steps found here and here to write custom css linting rules. They are tested and they work correctly, however now that I have created the rules I am not sure how to actually add them to the linter (or installed via npm) so that can be used via the CLI to lint my projects. I have scoured the documentation in the github wiki and cannot seem to find an answer.
Keep in mind these rules are project specific and they are not meant to be submitted to the csslint github repo.
Figured it out. I used 'grunt release' and then published it as an npm module, and then installed it. The cause for the issue was that I needed to uninstall the original version of cssLint as it was overriding the new one.
I’ve been trying to enable this for the better part of the last few hours…
I enabled the source maps in the project settings in CodeKit.
However, no CSS source map is being generated. I’ve checked the Chrome settings, the source maps option is enabled, as well as the individual switches for CSS and JS under Sources, but it still doesn’t work.
Does anybody know how to activate this?
Thanks.
Source maps aren't currently supported for Compass projects, but will be soon. I'm waiting on the actual release of Compass 1.0.0 (we're still on a pre-release version)
I'm researching the same problem. When I make a dummy set of files new on my desktop, Sourcemaps work fine. When I pull a repository from stash/github it will not generate source maps. So I believe it's a folder permissions error