I am using static react template and need to implement scss. my git hub sample : https://github.com/PrasanthGokuldas/Test_ReactStatic.git
i tried to add react-static-plugin-sass to package.json and included in static.config.js file as
plugins: ['react-static-plugin-sass']
but i am unable to access scss file to project.
Once you have added react-static-plugin-sass using yarn or npm, you need to add it to the top of your plugins array (static.config.js) as follows:
plugins: [
require.resolve('react-static-plugin-sass'),
[
require.resolve('react-static-plugin-source-filesystem'),
{
location: path.resolve('./src/pages'),
},
],
require.resolve('react-static-plugin-reach-router'),
require.resolve('react-static-plugin-sitemap'),
],
Then all you need to do is start writing your Sass in your app.scss file and import app.scss in your App.js.
Related
I have created an app in react.js with Vitejs, I have included a 3D model with Theejs (.glb file). When I use npm run dev my 3D model works perfectly without errors, but when I run npm run build the 3D model is not included in the dist/assets folder, only js, css and images files are included. How can I fix it? I feel that there is something wrong with the vite configuration as the paths are well placed.
This is my vite.config.js file
export default defineConfig({
plugins: [react()],
root: './',
build: {
chunkSizeWarningLimit: 3000,
outDir: 'dist',
},
publicDir: 'assets' ,
})```
and this is how I am loading my model in the component
const { nodes } = useGLTF("public/portal.glb")
You can use explicit url import.
import modelSrc form 'model/yourmodel.glb?url';
then
const { nodes } = useGLTF(modelSrc);
The model file will be assigned in [outDir]/assets after build.
I have an expo app .. all the mode modules are js ones. Now I am trying to add #react-three/fiber which I think is written in typescript. So, i feel the module is not working as expo is not compiling the ts or tsx files as it does with the js files. Can someone tell me how to make expo to build ts files also alongside the existing js files and node modules. Is expo capable of handling both js and ts in same project ? Below is the exception i am getting on opening the App
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
Android Bundling failed 1083ms
While trying to resolve module `#react-three/fiber` from file `/<projectpath>/src/screens/spinner/spinner-3d-60deg.js`, the package `/<projectpath>/node_modules/#react-three/fiber/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/mnt/57b4f320-a355-468b-a1f5-2d4d156e25e8/projects/external/PickABoo/node_modules/#react-three/fiber/dist/native.js`. Indeed, none of these files exist:
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /<projectpath>/node_modules/#react-three/fiber/dist/native.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
You need to configure metro to compile typescript files.
Edit metro.config.js (located in your project's root folder) and make sure you have the following sourceExts: ['jsx', 'js', 'ts', 'tsx'] within your resolver options.
See relevant documentation here: https://facebook.github.io/metro/docs/configuration/#sourceexts
If you don't already have a metro.config.js file in your root folder, you can create one and enter the code below:
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx'], // this line compiles typescript
},
};
i try to load the SASS for my Gatsby Project but if I check the source code of the web there isn't any classes from my sass.
I am a bit confused and I followed the documentation of Gatsby.
Nothing worked so my last chance is SO.
// gatsby-config.js
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-fontawesome-css',
'gatsby-plugin-sass',
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'assets',
path: `${__dirname}/static/`,
},
},
]
Here I import the style.
/**
* Add browser relation logic.
*/
require('./style/global.js');
import './style/sass/index.scss';
I followed the gatsby-plugin-sass documentation and I should be all set. After restarting the server and show source-code of my app there is now class name from my sass file.
Best Regards
Knome
I didn't integrate in any component. Because if I see the Source code
of chrome then there should be scss be loaded.
Ok, well... The SCSS is loaded as it should but the styles are not applied to any component because you've not set any class name.
Just do:
const IndexPage =()=>{
return <div className="grid-container">I'm your index page</div>
}
Like any other HTML element.
In React, is it possible to preload an image that is imported via JS import?
I would like a way to combine the following from my js file
import image from './image.svg';
and the following from my index.html file
<link
rel="preload"
as="image"
href="???/image.svg"
/>
I don't know how about create-react-app but if you use your own webpack setup you can try something like:
plugins: [
new HtmlWebpackPlugin({
...
}),
new HtmlWebpackInjectPreload({
files: [
{
match: /(filename)+.+(\.webp|\.png)$/,
attributes: { as: 'image' },
}
],
}),
]
If you are using HtmlWebpackPlugin, you can try the HtmlWebpackInjectPreload plugin, which is the extension of the first one. It will look for outputted asset names and inject links into the head section based on those findings.
https://github.com/principalstudio/html-webpack-inject-preload
You can use your imported image like this
<img src={image}/>
Since you import your image it will be loaded with the document.
Followed the link https://mattferderer.com/use-sass-variables-in-typescript-and-javascript
Looking to access the scss varaibles in react component . Not sure with what import name i need to call in react component since if i give as below import statement it is showing an error as cannot find the module '../scss/_variables.scss';
import _variables from '../scss/_variables.scss';
here _variables.scss is the file name which contains
// variables.scss
$white-color: #fcf5ed;
:export {
whitecolor: $white-color; }
I am scratching my head to get the "whitecolor" variable available in react component .
Also, I am using webpack as below
{
test: '/.scss$/',
use: [{
loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader' // translates CSS into CommonJS
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
}
Any help would be highly appreciated!!
Importing specific property in React does not work unless it is a module.
I was facing the same problem and here is what I did:
Renamed _variables.scss to _variables.module.scss and then the import is import _variables from '../scss/_variables.module.scss';
now you can access the scss variables just like _variables.whitecolor
On the react app, you can import the variable.scss in App.scss file. If there is no file just create it.
make sure that you have installed node-sass.
#import "../scss/_variables.scss";
Now the variables are accessible, I am using React Webpack.
Also, we have other options please check here
Thanks,
Prem
One way would be to npm install node-sass
Then change your app.css to app.scss and in there you import your stylesheet:
#import '../scss/_variables.scss';
Then you can use it like
.App-link {
color: $secondary-color;
}