We Keep Coding

SCSS not working within a REACT app specifically

I'm pretty sure its my folders filepath for my compile Sass script, but I've been at this one a few hours now, so I'm hoping you can help... (maybe there's a setup setting IDK about?...
Two similar projects - 1 Vanilla, 1 React.
1. On both I have node, NPM and node-sass installed; via: npm i --save-dev node-sass
2. I've got livesass compiler going. On vanilla it works as expected. On the React project live-sass-compiler keeps on crashing (it is working long enough for me to test it though) and when i run in the terminal: npm run compile:sass the terminal turns into a node, never compiles, and also seems to get stuck in this state.
Please help!
NOW FOR THE DIFFERENCES:
==========Filepaths==========
(Filepath is indicated by "./", multiple files indicated by array syntax.
Vanilla (root):
index.html (stylesheet href="./STYLES/SCSS/index.css")
index.js
./STYLES/ [index.css, index.css.map, index.scss]
package.json (script: "compile:sass": "node-sass STYLES/SCSS/index.scss STYLES/output.css -w")
Works great!
REACT (root):
./public/index.html (stylesheet href="../src/STYLES/CSS/index.css")
./src/index.js
.src/STYLES/ [index.scss, (desired css output)]
package.json (script: "compile:sass": "node-sass src/STYLES/index.scss src/STYLES/CSS/index.css -w")
in both of them, inside the node-modules folder, I have installed:
"devDependencies": {"node-sass": "^7.0.1"}

Hey, I figured it out! - I got rid of live-sass-compiler (it's depreciated). - I also removed the "script: "compile:sass": "node-s..."" as it's no longer required. Compilation will happen natively every time you save the file.
TO USE WITH REACT:
Terminal:
npm install -D sass
sass —watch scss:css
1. add an .env file to the root. Inside type: “SASS_PATH=src/STYLES/SCSS”
(this allowed relative paths to be ignored on previous versions. I haven't gotten this to work but everything else seems to work. It may be depreciated... IDK.)
2. include the filepath import to the JS page you’d like the CSS to live under:
(example (for APP-WIDE Changes): index.js: import './STYLES/index.scss’ //imports to the app component
3. to import another file from index.scss:
Within the index.scss file:
#use './SCSS/_unorganized.scss'; // ("#import" will soon be depreciated, instead use #use)
Hope this saves someone else some time!

Vue CLI 3 target build lib exclude shared styling

I am currently working on a Vue.js project where i use the Vue CLI 3 to build components in lib mode like this: vue-cli-service build --no-clean --target lib --name ComponentName.vue. The components can then be used any website if registered in a Vue instance.
However, the website contains it's own stylesheets and the component too. To develop and see the actual styles applied to component i have to pull in these (shared) styles in every component i develop. Therefore they are also in the compiled stylesheets after building the component using the command stated above (vue-cli-service build).
My question: Can i exclude the (shared) styles when building the component? I can't find anything about it in the docs (https://cli.vuejs.org/). If somebody could provide the answer or a (Webpack) workaround that would be much appreciated.
Many thanks in advance!

I am not sure if I understand you correctly but there is an option to have these styles inline in the components itself, which would be much easier for development.
https://cli.vuejs.org/guide/build-targets.html#app
dist/myLib.css:
Extracted CSS file (can be forced into inlined by setting css: { extract: false } in vue.config.js)

How to tell angular cli to stop using minified version of a vendor js file?

I have a build that includes the following scripts in my angular.json file:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/lodash/index.js",
"node_modules/backbone/backbone.js",
"node_modules/jointjs/dist/joint.js"
]
As you can see there, I'm including node_modules/jointjs/dist/joint.js, which is the non-minified version of the jointjs library.
However, when I run ng serve it continues to bundle the joint.min.js file, which resides in the same directory as join.js.
I would like to use the non-minified version while in dev, to help me track issues with params I'm passing to the library.
How can this be accomplished?
Thanks!

To achieve this you can redirect to the correct file in the tsconfig.json file like this.
"paths": {
"jointjs": [
"node_modules/jointjs/dist/joint.js"
]
}
Also I don't think you really need to have anything at all in scripts. What you put here gets included in another output file scripts.js which is separate from vendor.js and is meant if you want to include some scripts like the includes in a webpage. In this case all the related libraries get included by joint.js automatically and go into vendor.js so there is no need to include them again. Here is the documentation about global scripts in angular-cli.
Another option is that you edit the package.json file in the jointjs npm module (npm_modules/jointjs/package.json) directly and change the entry "main": "./dist/joint.min.js", to "main": "./dist/joint.js",. This is a bit of a hack since you are changing the npm package.

Using external js file in vue file with Webpack

I am working on a project which is used typescript, vue and webpack together. I have created some components and i can use them by importing. However i have different js files in another root folder like site.js, ruler.js, color.js, speech.js, drware.js and etc. Schema is like below
+|dist
----build.js
+|src
----index.ts
+|main
----Header.vue
----Footer.vue
----Body.vue
+|lib
----site.js
----ruler.js
----drawer.js
----color.js
webpack config is getting index.ts from src folder which is shown above. When I don't use some functions (like jquery plugins or some special funciton) everything is fine. But when i use a functon from site.js webpack fives error like cannot resolve "ruler" from site.js
I have tried to concat by giving second entry in webpack.config.js but it didn' solve my problem. I wonder how to to resolve external js files in vue or ts files using webpack. I alson tried
require(""../src/site.js)
but it didn't work too.
Edit : If i concat the js files manually and give it as script source on html it works without problem but i cannot merge all files like or i don't want to use "gulp" to concat them

Have you tried including a script-loader into your webpack's configuration?
Webpack is a bundler, not a script loader itself. I would recommend you to follow webpack's official instructions to add a script loader.
Good luck!

Reactjs Module not found | Css import

I will try to be concise, I must work on a Reactjs project for school project, my task is to take a existing html/css theme and and put it in React components.
But I have a problem since the start, I used CreateReactApp for a clean start and import index.css of the theme.
Create a basic form base on the theme and have this error. (She disapear when I delete index.css)
Error I see
Failed to compile
./src/css/index.css
Module not found: Can't resolve '../images/category-1-bg.jpg' in
'C:\Users\50031\Documents\React-Project-master\src\css'
Structure of the project is that
Structure project
Thanks so much, I already check for an answer but I suck as hell in code and understand nothing.... Sorry

Your images directory is not inside css directory and that is what the error says. This is because somewhere in your index.css you have not assigned correct path for the images. Assign correct paths to the images in your index.css and the app should compile.

Install css-loader so that it will include the image during build time.