I just started using docz and added it to an existing project. I got a component from my react folder to show up but it is missing styling so I am trying to import my SASS files into my docs.mdx file. I followed the directions on https://www.docz.site/docs/usage-with-css-preprocessors and added the below to gatsby-config.js.
plugins: ['gatsby-plugin-sass']
But everytime I run yarn docz dev, the .docz folder where I have the gatsby-config file keep getting reset and it removed the gatsby-plugin-sass line. Am I missing anything?
File structure below. (Only showing the folders and files I referenced)
- .docz
--- gatsby-config.js
- react
--- components
--- docs
------ docs.mdx
- styles
---
---
I solved this problem today...
You need to create a copy of the gatsby-config.js and place it in your root folder (same directory where your src folder is). This automatically creates a gatsby-config.custom.js file in your .dist folder.
Then you add 'gatsby-plugin-sass' to the plugins array of the custom JS created. This should have been installed in your package.json already.
Then run yarn docz dev and you're good to go.
Also note that you need node-sass installed in package.json
Related
Is there any way to specify that create react app to not create src folder, rather I want the files to stay at root directory so I can work on my project.
I'm afraid, there is no way.
From the documentation about the folder structure
For the project to build, these files must exist with exact filenames:
public/index.html is the page template;
src/index.js is the JavaScript entry point.
Even if you try to use a custom template, it requires src/index.js or src/index.tsx files to exist
There are two possible solutions you can try:
Use craco and adjust webpack configuration to allow the source code to be in the root folder
Eject create-react-app and re-configure webpack
When I run
react-scripts build
I get the following message :
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
However I do not have React 17. It is not installed, or in my package.json file.
The only thing I did was upgrade to React 17 a few days ago to play around with it, but then I reverted. Everything is back to 16.
Why does react-scripts think it should update my JSX?
I just realised what the problem was.
I had a package.json file one level up from my actual project. It was there by accident. Inside the "parent" package.json I had React 17 defined.
package.json
|
|----- package.json
It seems like npm or CRA is behaving like Maven and trying to recursivley process build scripts up the folder tree.
I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.
I've create a test application with Ionic v5 w/React and I don't see any specifics in the documentation on how to configure Sass preprocessing. I have a couple sass files in the project structure, but they don't seem to be loading or being processed for that matter. I added node-sass to the package.json. Any help would be much appreciated. I used the Ionic Cli to created a blank app and added some .scss files to the project dir.
So I figured it out. Turns that ionic looks at the themes directory for all style sheets, including scss sheets. So I simply place my scss files there, ran ionic serve and imported the base style sheet, import '/theme/styles.scss' into the "main" component and it worked. I could run ionic build command see that the scss files were processed and minified into a .css file.
So just to make it clear that you do need to install node-sass via npm or yarn in order for Ionic to support scss files after that you can change any files whether it’s inside pages or components or theme folder and you just have to update the import to scss instead of css
Command for Installation
npm install --save-dev node-sass
Import changes
After upgrading to the newest version of create-react-app I've run into a bit of a big problem where web pack no longer watches for changes.
In my project I use node_modules to keep all of my project source code, and while I can import code from here without problems, web pack no longer watches this folder which means any changes made require restarting the project which is very frustrating.
bellow is an example of what my project structure looks like:
my-app/
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
node_modules/
my_app/
components/
ui/
resources/
styles/
images/
App.js
index.js
Again, creating an consuming a new component is no problem, but making changes no longer get updated live in the browser, and I can't seem to find what the solution is.
In react-scripts in create-react-app, there is a configuration for webpackDevServer; webpackDevServer.config.js
There the directory node_modules is ignored. Could you remove this and try out?