While I am running grunt, I am not able to see less file paths into the browser inspect element in magento2click here
In magento 2.4.4 version CSS source mapping not working
Mostly for front end when working with grunt we used devdoc
but some time its not working so here is another solution for this
Edit [Root]/package.json file
and update the version of grunt-contrib-less to 1.4.1
"grunt-contrib-less": "~1.4.1"
then run npm install
that's it.
It will work for css source mapping.
Related
It may be a dumb question but I feel that I'm floundering around attempting to edit the wordpress plugin that I downloaded from github repo: https://github.com/WordPress/gutenberg-examples.
Right now, I'm following the block tutorial from https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/.
So what I did:
download the pre-built plugin in zip folder
upload it to wordpress site that I created in docker (https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/)
open the zip folder and move it to my plugins directory
open, for example, "01-basic-esnext" folder inside the gutenberg-examples folder and edit in block.build.js. The changes I made would be shown in the block editor in the wordpress post that I created.
However, what I'm confused about is the npm stuff that's mentioned in "Development" section.
For each of the examples that include an esnext example the following
commands are required to build the plugins:
To install the node packages
npm install
To build the production version of the plugin
npm run build
To build a development version, change to the local
directory of the block you are working on, and run npm start to watch
for changes and automatically rebuild as you develop.
cd 01-basic-esnext/
npm start
Before that, the "Development" section already mentioned building a docker/wordpress environment for the plugin right inside the gutenberg-examples folder.
However, the way I set up my stuff is different. I already have a docker running in my wordpress folder like what I followed in https://developer.yoast.com/blog/set-up-wordpress-development-environment-in-docker/ and this plugin is already in my plugins directory. I can easily edit the files in visual studio code and see the changes in my local wordpress site.
So should I be doing something to install the npm stuff or leave it alone?
npm is used for these WordPress plugins because the -esnext versions of the examples get built from Javascript modules. The build process runs on npm and nodejs. That means, if you work on that -esnext code, that you're living in a hybrid world -- you have php and apache running your development web server, and you have nodejs and npm handling your builds.
The WordPress team carefully rigged a docker setup to support the process of edit / run for you. So if you use your own docker setup, you won't get the benefit of theirs.
When you have finished your development effort, you can use npm run build to build a .zip file which you can then install in your own WordPress instances using the Upload Plugin button at the top of the Add Plugins page.
Code is poetry, for sure. But development environments are not.
I am trying to use CKEditor for strapi project, but failing to integrate.
What I did so far:
strapi new cms --quickstart It is starting me new cms application.
npm install ckeditor
Edit the code located at ./plugins/content-manager/admin/src/component/Edit/index.js to CKEditor implementation
npm run build to see my changes, tried npm run setup too
But here I'm getting error webpackJsonp is not defined
I'm not providing the code how I modified, because, build command is not reaching till there.
I appreciate any help you can provide
In order to change the default WYSIWYG in Strapi you will need to
Fork the repository check out the CONTRIBUTING GUIDE
Once you have the development setup you can directly modify the code in packages/strapi-plugin-content-manager/admin/src/components/WYSIWYGWithErrors and its related children. Install the dependency in strapi-admin
Uninstall the content manager plugin (again make sure you are running the latest version of Strapi
Copy the strapi-plugin-content-manager package inside your app's plugin folder (rename it content-manager)
Copy the following file in my-app/admin/src/plugins.js and change the paths of the plugins so it matches your new one
run yarn develop
I have an angular cli project, which packages, runs, and deploys without issue. My problem is, we need to also provide a static CSS file in a separate directory for our CDN deployment (for people using plain html).
So we created an npm script:
sass --scss --sourcemap=none ./client/src/sass/designsystem/designsystem.scss ./dspackage/dist/css/designsystem.css
The problem is that when I run it, it is trying to use Ruby Sass. I get an error:
/usr/local/bin/sass: /System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby: bad interpreter: No such file or directory
How can I get it to use node-sass, which is installed correctly both locally and globally?
Before anyone just says to "install ruby sass", I want to compile this css file with the same compiler as the one in our bundle.
This is on OS 10.13.2, angular cli 1.4.4, node-sass#4.7.2
I'm grappling with the HTML5 + JS path for writing photoshop extensions, and I'd like to use Coffee instead of plain JS.
However the node install included with Photoshop appears to be version 0.10.30 and does not seem to include npm. Is there a way to install npm into the photoshop version of node? Or would it be save to replace that version with one which includes npm? As a last resort I can probably install another node with npm, and coffee, then copy the js into the plugins -- but that seems very awkward.
Has anybody tried this already and cracked it?
You can use a separate directory for development and a task runner like Grunt to compile your sources into the plugins directory whenever there are changes.
Take a look at some boilerplates to get you started quickly, like grunt-html5-boilerplate or vtex/speed
So I have created a pretty default keystoneJS project and the first error that appeared was that when ran locally the website's default css won't load.
It's looking for site.min.css but in the folder there is only site.scss
After I compiled the scss via sublime text 2 sublimeBuild and renamed the file to site.min.css (from site.css) it ran perfectly but what worries me is why does the default installation have this error.
Where should I change this? Is there an scss builder included so I have to change folder naming or is there some other issue?
My guess is that it has something to do with some step skipped. I remember the keystone installation asked me whether I wanted to use sass so I suppose everything should be ok.
Is the problem because I did not use grunt somehow?
I recall reading somewhere that this grunt tool has to be used instead of node when running a server and I see a Gruntfile in my folder but when installed grunt-cli the grunt just loads and terminates the server right after that.
You don't have to do anything, sass-middleware is included and automatically generates CSS files from your SASS source files when they're requested.
The issue you were experiencing with site.min.css not being found was an error in the yeoman generator, from when the SASS support was added. The LESS middleware automatically compresses generated CSS when a request is made for a file ending in .min.css, but the SASS middleware doesn't do the same, so the request was 404'ing.
The problem with the yeoman generator has been fixed as of version 0.2.9, for existing projects the simple fix is to change your layout file so it refers to site.css instead of site.min.css.
Once you do that the middleware will automatically detect the presence of site.scss and generate an up-to-date version of site.css for you.