I am very excited to use Rails7 especially that we finally get rid of webpacker.
However, today when I tried to try Rails7, I didn't get how to bundle javascript scripts anymore... and there wasn't tutorial there or I just could not find it.
For example, I wanted to import jquery so I ran
yarn add jquery
and then I wrote:
// application.js
//importmap-rails
import "#hotwired/turbo-rails"
import "controllers"
import jquery from 'jquery'
But it didn't work,
then I read the readme on importmap-rails, and I ran
./bin/importmap pin jquery
then it added a line in config/importmap.rb
pin "jquery", to: "https://ga.jspm.io/npm:jquery#3.6.0/dist/jquery.js"
It worked, however, it was not what I expected exactly. I wanted the jquery came from node_modules/ instead of CDN
How can I achieve that? To import npm packages that I install from yarn/npm?
Or just point out where I can find documents about how to use javascript in Rails7?
./bin/importmap pin jquery --download
will download it.
Working with JavaScript in Rails
(about dealing with JS but little info about importmap)
importmap-rails on GitHub (more info about importmap)
I believe you can manually update your config/importmap.rb file to read
pin "jquery", to: "./node_modules/jquery"
That being said, I believe the design decisions made with importmaps may not include npm or yarn. I believe importmaps represents an alternative method for handling javascript outside of webpacker/yarn/npm.
Related
So I downloaded a package from NPM its called react-csv-importer. My React app is using scss to customize layouts. I am coding from a react-bootstrap template I purchased from react-bootstrap.
Their layout is confusing me and I cant seem to understand how to customize an NPM package I install...
Here is a photo of the index.css file that contains everything I need to edit
Here is a screenshot of the layout of the SCSS
Here is another screenshot inside the theme folder, It contains most of the scss files
Now shouldnt I just be able to create a new file called something like csv-importer.scss and then copy the code from index.css thats located in the NPM package and update it in the SCSS? How do people go about editing an NPM install this way?
You should never customize or touch a package you've installed through npm. If you change the package in node_modules then 1. it will get overwritten as soon as you do npm install again, 2. it won't be saved to your github since you need to exclude node_modules with .gitignore. node_module packages should be left alone, untouched.
Instead you should import the things you need to use from packages and use it in your own code. So if you have a package called "example" that you've installed through npm then you need to do:
import Something from 'example'
// use Something here
In order to use it. This is how you use stuff from node_modules.
In your case you should likely import the styles from the package you've installed, either through scss #import or through node import, after which you can use it in your own code. However you should not modify the original code they have.
If the package they have is .css then you can't change that to .scss, you'll just have to use it as .css. Which is not such a big deal since scss will get compiled to css anyways.
What you can do is to import all of their styles through #import and then to overwrite the things you want in your own code or scss.
I'm building a style guide based on a Sass / CSS library I had built earlier. I installed the library in my package.json as a devDependency using npm (on npm I have a private package for my library). My problem is that when I try to compile Sass using node-sass, it returns following error:
"Couldn't find the stylesheet to import"
The file I want to import is called tsw.scss. In any other project in which I have been using node-sass, I never had problems compiling (or at least I always managed to find them and solve them alone). So, I really can not understand, where I'm wrong this time. Could any of you help me understand what my mistake is and fix it?
Thanks in advance to anyone who will help me.
This is the code I used in my "styles.scss" file (of my style guide) in which I want, in fact, to import the library I previously created (the import that gives me the error is the import of the first line).
#import "~#alllearnit/tsw/tsw";
#import "tsw-guide-styles";
If needed, I could share any part of my code that you may need to better understand my project and therefore to help you to solve the problem.
Thanks again for all the help you will give me
Regards
Alessandro
The ~ at the front of the import isn't natively supported by node-sass. There maybe a plug-in you're expecting to be loaded if you copied that snippet from somewhere else.
I'm creating the initial setup of a proof of concept project using ReactJS and typescript, and I'd like to include the CSS modules in it without having to eject the webpack configuration.
Here are the steps I followed so far:
npm install -g create-react-app
create-react-app firstapp --scripts-version=react-scripts-ts
npm install react-app-rewired --save-dev
npm install --save-dev codebandits/react-app-rewire-css-modules sass-loader node-sass
package.json:
"start": "react-app-rewired start --scripts-version react-scripts-ts"
config-overrides.js:
const rewireCssModules = require('react-app-rewire-css-modules');
module.exports = function override(config, env){
config = rewireCssModules(config, env);
return config; }
I correctly set my App.module.scss file, and referenced it in my App.tsx file:
import styles from './App.module.scss';
When I run the project, I have an error regarding the css module:
Cannot find module './App.module.scss'.
When I do the exact same project without the typescript configuration, it works though.
What should I change for the CSS modules to be taken into account?
I came accross typings-for-css-modules-loader, but I'm not sure how to integrate it in my configuration since I didn't eject the webpack configuration.
Thanks in advance,
Thomas .T
EDIT 1:
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
I added a global.d.ts file with:
declare module '*.css'
declare module '*.scss'
And it did the trick. I didn't use typings-for-css-modules-loader in the end.
The answer comes from this article: https://hackernoon.com/zero-config-react-typescript-css-modules-jest-with-poi-bbcedfe2383a
Gonna accept this as an answer within 2 days.
I got the workaround after googling a lot. I'm new to react js and trying to build using typescript so I found the solution and started using
react-script-ts
package. But when I started using css module faced the problem import class from './button.css' didn't work so I used import './button.css' but in this got lot of css conflicts, higher component scope css always overridden by lower component. so googled a lot and finally got the solution.
Solution
From 2.1 create-react-app having support for typescript so convert your application to 2.1 above
1.create new application using `npx create-react-app my-new-app --typescript`
2. replace your old src folder in new solution
3. Rename all your css file with `*.module.css` and change the import based on that.
4. Add your package dependancy if anything missing
5. Run
source : https://joshblog.net/2018/upgrading-a-react-and-typescript-app-from-react-scripts-ts-to-create-react-app-v2-1/
I'm trying to update my Bootstrap dependency in my Ember application to the alpha 4 version so I can access the utility classes (such as margin/padding).
I think Bootstrap is a bower dependency since it's listed in bower.json, so I followed the instructions from the new Bootstrap website:
bower install bootstrap#v4.0.0-alpha.3
When I did this, bower.json didn't update. In fact, Bootstrap version is still "bootstrap": "^3.3.7".
The only differences are:
Now I have 152 JSHint errors in my terminal...I tried adding "bootstrap":true to .jshintrc and restarted my server but the errors were still there.
My ember app was broken until I removed line 1 in change-version.js, which was #!/usr/bin/env node.
When I start typing a new css style in my templates, the CSS styles are showing up, but my Ember application is not recognizing them. For example, here is an image:
When I add the class m-r-3 and reload localhost, nothing shows up.
I've already tried importing bootstrap.min.css and bootstrap.css in the ember-cli-build.js file. It didn't work.
I have already read through this page which goes over dependencies but I have had no luck. If anyone could assist here that would be greatly appreciated.
You need to use --save parameter to save bower.json:
bower install --save bootstrap#v4.0.0-alpha.3
Look at the bower_components directory, does it keep the old version of the bootstrap? If so remove it.
You should add bootstrap.css to the ember-cli-build.js, as you said. Have a look at this addon, check your coding against of a typo or erronous adding.
Does your client loads any version of bootstrap? (Check vendor.js)
This may seem like a silly question for front end developers, but how do you modify the CSS stylesheets in JHipster? With Gulp, Nodejs, Bower, Boostrap, Sass, Gradle/Maven and Compass all intermingled, some pointers to get started would be appreciated. I'm using Gradle.
Of course, simply modifying src/main/scss/main.scss, doesn't seem to work!
The solution is:
Install gulp - see: https://gist.github.com/aaronwaldon/8657432 and
any missing npm dependencies not mentioned in the article (if gulp fails in #3 below).
Edit src/main/scss/main.scss as required.
Then, in the project root (where gulpfile.js is), and run gulp - for my configuration, we're using Compass, so the "gulp compass" command updated the css.