I have SASS installed via NPM (SASS version 1.32.13 compiled with dart2js 2.12.4) and this setup in package.json:
"scripts": {
"sass-dev": "sass --watch --update --style=expanded _assets/scss:wwwroot/dist/css",
"sass-prod": "sass --no-source-map --style=compressed _assets/scss:wwwroot/dist/css"
},
I would like my setup to add vendor prefixes to the generated css. How can this be done best? Autoprefixer, I guess, but how?
PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba.
npm i autoprefixer
Related
I am quite unfamiliar with npm, (I develop in python) and most of the time I just do what the tutorial says. But now I am stuck. I tried Tailwindcss in combination wit 'Vue 3' and followed the install steps from the website:website tailwind+Vue 3
npm init #vitejs/app my-project
cd my-project
npm install
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
npx tailwindcss init -p
And after adding some HTML and running:
npm run dev
everything works fine in the browser.
But then Iwant to build it for using in production I use
npm run build
and after some processing my dist folder is filled with an index.html and assets.
And here starts my problem. I was expecting that I could copy these files to my server and that it should serve my site. But All I see is a blank page.
I can't find the answer anywhere or others with same problems so I think its something stupid I just don't know. But what is it?
Hope someone can help me...
Try this, maybe something will work
https://dev.to/vonagedev/using-tailwind-css-with-vue-js-b1b
Webpack (and Vue-loader which is a Webpack loader for Vue.js components) can be configured to use PostCSS which is a Webpack loader for CSS.
It will look for the configuration inside a postcss.config.js file and can build the app with CSS from packages you add.
And, configure it using this code.
// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [
tailwindcss,
autoprefixer,
],
};
The demo app is also generated without any CSS assets. Instead, it uses CSS inside the components (which is fine). To include Tailwind CSS, create a CSS asset using your editor or the commands below.
# mkdir -p for making parents they don't exist
mkdir -p src/assets/styles/
touch src/assets/styles/index.css
Now add this code, which adds the various packages of the Tailwind CSS library.
/* src/assets/styles/index.css */
#tailwind base;
#tailwind components;
#tailwind utilities;
```
I'm creating a small Laravel package, I've set it up in package/my-package and initiated a composer.json in package/my-package/composer.json.
It's working fine, but I need to add dependencies like Bootstrap, jQuery, jQuery Datatables...
How should I use npm to install thoses dependencies automatically after composer is done installing?
Like for example, after publishing the package, users should only use composer require my-packakge/my-package and it should install everything including the dependencies I mentioned.
I've tried adding this code to my composer.json, but it did nothing:
"extra": {
"npm": {
"bootstrap": "^4.3.1"
},
}
Should I add a separate package.json file in addition to composer.json ? if so how will it work ?
I'm trying to install ESlint to use it with Sublime Text 2 for all my local projects. Configuration documentation is very unclear about global installation:
Note: eslint --init is intended for setting up and configuring ESLint on a per-project basis and will perform a local installation of ESLint and its plugins in the directory in which it is run. If you prefer using a global installation of ESLint, any plugins used in your configuration must also be installed globally.
I don't understand what they mean. I used eslint --init and it installed ESlint locally in node_modules, along with all plugins. There's nothing explained about installing plugins globally. How do I do that? Also, how do I use the global ESlint installation if eslint --init installs local one anyway? This is so confusing.
You can install Node modules within the project (locally) or globally. To switch to globally, you may use the -g flag, like so:
npm install -g eslint
Then see if it's working without Sublime Text (-v flag to see the version of eslint):
eslint -v
To see where it was installed (assuming MacOS/Linux):
which eslint
Then see if it's working in Sublime Text (you may need to restart Sublime first). If it's not working, make sure in the eslint package settings that the path is correct.
The assumption is that you have an eslint plugin installed for your editor,if you have then npm install -g eslint,then you can install add-ons for specific environments,like npm install eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import -g (this is support for pure JS and for React),you can on this way add support for nodejs too,in working folder make .eslintrc file which looks like this
{
"extends": ["airbnb" , "eslint:recommended"],
"env": {
"node": false,
"es6": true,
"browser": true
},
"rules": {
"semi":"error",
"no-unused-vars": "off",
"func-names":"off",
"indent":"off",
"no-else-return":"off",
"prefer-arrow-callback":"off",
"no-undef":"off",
"no-use-before-define":"off",
"comma-dangle":"off",
"eol-last":"off",
"no-trailing-spaces":"off",
"linebreak-style":"off",
"no-console":"off",
"no-restricted-globals":"off",
"object-shorthand":"off",
"no-shadow":"off",
"no-debugger":"off",
"prefer-const":"off",
"no-multiple-empty-lines":"off"
}
}
if you need node support then in env section of .eslintrc set node to 'true' and install eslint-node plugin globally too with next
npm i eslint-plugin-node -g.
Then in extends section of .eslintrc add "plugin:node/recommended".
In this way, you will have eslint support in every project on your machine which have .eslintrc file.Set rules which you need in .eslintrc rules section .
Thats it.
To install eslint globally: npm install -g eslint
To install eslint in your project folder: npm install eslint --save-dev
Add in package.json this script : "eslint": "eslint --ignore-path .gitignore ."
Create a file called .eslintrc and insert :
{
"env": {
"browser": true,
"node": true
},
"globals": {
"chrome": true
},
"rules": {
"no-console": 0,
"no-empty": [1, { "allowEmptyCatch": true }]
},
"extends": "eslint:recommended"
}
Personally, I save this file in my js folder
Go to node_modules/.bin
Run : eslint --init
or npm run eslint nameOfYourFile
Unfortunately, ESLint no longer recommends the use of Personal Configuration. Even if you have ESLint and other ESLint configuration files installed in the global scope, it will not read them correctly.
https://eslint.org/docs/latest/user-guide/configuring/configuration-files#personal-configuration-files-deprecated
Personal Configuration Files (deprecated)
⚠️ This feature has been deprecated. This feature will be removed
in the 8.0.0 release. If you want to continue to use personal
configuration files, please use the --config CLI
option.
For more information regarding this decision, please see RFC
28 and RFC
32.
~/ refers to the home directory of the current user on your
preferred operating
system. The personal
configuration file being referred to here is ~/.eslintrc.* file,
which is currently handled differently than other configuration files.
How does ESLint find personal configuration files?
If eslint could not find any configuration file in the project,
eslint loads ~/.eslintrc.* file.
If eslint could find configuration files in the project, eslint
ignores ~/.eslintrc.* file even if it's in an ancestor directory of
the project directory.
How do personal configuration files behave?
~/.eslintrc.* files behave similarly to regular configuration files,
with some exceptions:
~/.eslintrc.* files load shareable configs and custom parsers from
~/node_modules/ – similarly to require() – in the user's home
directory. Please note that it doesn't load global-installed packages.
~/.eslintrc.* files load plugins from $CWD/node_modules by default
in order to identify plugins uniquely. If you want to use plugins with
~/.eslintrc.* files, plugins must be installed locally per project.
Alternatively, you can use the --resolve-plugins-relative-to CLI
option
to change the location from which ESLint loads plugins.
I use the Roots/Sage wordpress starter theme, which uses npm, gulp and bower.
I wan't to use the blueimp gallery in my theme.
Earlier I installed it with bower, but the new version of Bluimp/Gallery does not have bower.json file, and the creator of Blueimp/Gallery says:
With the latest version of NPM and its support for flat dependency
trees, I don't see the need for bower anymore.
How should I install Blueimp/Gallery in my theme?
I tried with npm install --save blueimp-gallery, but now gulp did not complie the css and js of Blueimp into my main.js and main.css. Should I still use bower?
I decided to use bower.
Edited my bower.json file, so it's build the files of blueimp/Gallery as well:
"overrides": {
"blueimp-gallery": {
"main": [
"css/blueimp-gallery.css",
"css/blueimp-gallery-indicator.css",
"css/blueimp-gallery-video.css",
"img/error.png",
"img/error.svg",
"img/loading.gif",
"img/play-pause.png",
"img/play-pause.svg",
"img/video-play.png",
"img/video-play.svg",
"js/blueimp-helper.js",
"js/blueimp-gallery.js",
"js/blueimp-gallery-fullscreen.js",
"js/blueimp-gallery-indicator.js",
"js/blueimp-gallery-video.js",
"js/blueimp-gallery-vimeo.js",
"js/blueimp-gallery-youtube.js"
]
}
}
I also edited my gulpfile.js, because the css of Blueimp/Gallery was looking for it's image in dist/img, but my gulpfile copied them to dist/images and dist/fonts (the svg's). So I added this line to the fonts and images gulp tasks:
.pipe(gulp.dest(path.dist + 'img'))
In my front-end code, I use require() to pull in libraries which, in turn, depend on different versions of Underscore.js. As a result, when I use browserify to bundle everything together, the output contains multiple copies of Underscore. Is there a way to tell browserify that require('underscore') should always import a particular file?
As a demonstration of the problem, imagine I have the following dependencies:
// package.json
"dependencies": {
// Depends on underscore 1.7.0
"backbone": "^1.1.2",
// Depends on underscore 1.6.0
"backbone.marionette": "^2.3.0"
}
In main.js I use both libraries:
// main.js
var Backbone = require('backbone');
var Marionette = require('backbone.marionette');
console.log("Hello, world!");
When I create a bundle, multiple versions of Underscore are included:
PS> browserify main.js -o out.js
PS> findstr _.VERSION out.js
_.VERSION = '1.7.0';
_.VERSION = '1.6.0';
(I created a GitHub repository with a more complete example. Clone it and run npm install && npm test to see it in action)
I tried adding a browser section to my package.json like the following, but it didn't seem to have any effect:
// package.json
"browser": {
"underscore": "./node_modules/underscore/underscore.js"
}
I understand why npm installs duplicate dependencies (and it makes sense to do it this way for server-side code) but what's the correct way to deal with this when using browserify?
There is a duplicate detection in Browserify that should avoid loading the same version more than once. However, if your node_modules tree contains multiple copies of the same module, this detection might (should?) fail.
The solution that I'm using is to dedupe the package structure with npm:
npm dedupe
This will only leave unavoidable dupes in your dependency tree and it will log a warning about those dupes so that you can double check.