Using the answer from this post Replace options of node-sass-chokidar to dart-sass to update our build-css and watch-css scripts in our react app. However, we are getting a new error that it is unable to find stylesheets:
nicholas#MacBook-Pro-4 client % npm start
> our-project#0.1.0 start
> npm-run-all -p watch-css start-js
> our-project#0.1.0 watch-css
> npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch
> our-project#0.1.0 start-js
> react-scripts start
> our-project#0.1.0 build-css
> sass -I ./src -I ./node_modules src/:src/
Error: Can't find stylesheet to import.
╷
2 │ #import 'node_modules/bootstrap/scss/functions';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/styles/App.scss 2:9 root stylesheet
ERROR: "watch-css" exited with 65.
Here are the scripts in our package.json:
"scripts": {
"build-css": "sass -I ./src -I ./node_modules src/:src/",
"watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:src/ --watch",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "react-scripts build --stats",
"analyze": "webpack-bundle-analyzer build/bundle-stats.json",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
In our /client/src/styles directory, we have App.scss, fonts.scss, tables.scss which are the 3 .scss files that our react app uses. I tried updating src/:src/ to src/styles/ however this did not work either, threw the same error. How can I correctly point to our 3 stylesheets in the /styles directory?
Edit: I followed the path and noticed in node_modules/bootstrap/scss/ that functions did not exist. This import was happening in our src/styles/App.scss file
src/styles/App.scss
#import 'node_modules/bootstrap/scss/functions';
#import 'node_modules/bootstrap/scss/variables';
#import 'node_modules/bootstrap/scss/mixins/_breakpoints';
...
There is an _functions.scss, however when I rename the import to include the _, unfortunately the original error Error: Can't find stylesheet to import. does not go away. Adding a .scss doesn't help either.
The issue was the import in our App.scss file, which needed to be updated from #import 'node_modules/bootstrap/scss/functions' to #import '../node_modules/bootstrap/scss/_functions'.
I am not sure why, previously, the path without the ../ was working. I am also not sure if/why the bootstrap/scss filenames were changed to include an _. Had I read the error messages more carefully initially I probably would have resolved this sooner.
Related
How can I solve this warning when creating laravel project?
1 WARNING in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
Steps to replicate:
composer create-project --prefer-dist laravel/laravel example
cd example
composer require laravel/ui
php artisan ui vue --auth
npm install vue#next vue-router#next vue-loader#next
npm install
npm run dev
EDIT
From this solution, add these lines to webpack.mix.js
mix.webpackConfig({
stats: {
children: true,
},
});
The above solution creates another warning:
WARNING in ./resources/sass/app.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-6.use1!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-6.use[2]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-6.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-6.use[4]!./resources/sass/app.scss)
Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
Warning
(2423:3) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
Child mini-css-extract-plugin C:\xampp\htdocs\lva\node_modules\css-loader\dist\cjs.js??clonedRuleSet-6.use1!C:\xampp\htdocs\lva\node_modules\postcss-loader\dist\cjs.js??clonedRuleSet-6.use[2]!C:\xampp\htdocs\lva\node_modules\resolve-url-loader\index.js??clonedRuleSet-6.use[3]!C:\xampp\htdocs\lva\node_modules\sass-loader\dist\cjs.js??clonedRuleSet-6.use[4]!C:\xampp\htdocs\lva\resources\sass\app.scss compiled with 1 warning
webpack compiled with 1 warning
How can I solve this?
The color-adjust shorthand is currently deprecated and it depends on the autoprefixer#10.4.6 (source).
I was able to fix this by reverting the autoprefixer package as well as #Benno to version 10.4.5. Run this:
npm install autoprefixer#10.4.5 --save-exact
You probably updated your npm packages. I was able to fix this by reverting the autoprefixer package to version 10.4.5 in the package-lock.json.
when you have problem with autoprefixer maybe because your version autoprefixer. you can add version autoprefixer based problem this version autoprefixer . i have problem on "print-color-adjust" and i add code on my package.json for change my autoprefixer become version "10.4.5"
when you use npm
"overrides": {
"autoprefixer": "10.4.5"
},
Or, when you use yarn
"resolutions": {
"autoprefixer": "10.4.5"
},
Don't forget to delete your package-lock and node_modules , then npm install again.
it work for me (react-bootstrap.v.5)
If you don't want to add additional packages to solve this error, then try this:
Capitalize all the files and Directory name in your components folder
Or you can run this command to install a package if the above solution doesn't work.
npm install autoprefixer#10.4.5 --save-exact
I'm using React with InertiaJS and Laravel as backend, this solution worked in my case.
Thanks
I have the same problem, whenever I hit save an annoying pop-up of error code comes. The simple solution is to add the following code to your webpack.mixjs file :
mix.webpackConfig({
stats: {
children: true,
},});
stop the npm run watch
add a package autoprefixer, add below in terminal:
npm install autoprefixer#10.4.5 --save-exact
run npm run watch and it will not give the error again.
I solved this issue within Laravel by changing the file ./node_modules/bootstrap/scss/forms/_form-check.scss
Line 28 part of the .form-check-input style
change color-adjust: exact; // Keep themed appearance for print
to print-color-adjust: exact; // Keep themed appearance for print
This is the error i get after importing #fortawesome
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
16 │ #import "~#fortawesome";
│ ^^^^^^^^^^^^^^^
╵
C:\xampp\htdocs\renazaandam\resources\sass\app.scss 16:9 root stylesheet
To install font-awesome you first should install it with npm. So in your project root directory type:
npm install font-awesome --save
Then edit the resources/assets/sass/app.scss file and add at the top this line:
#import "node_modules/font-awesome/scss/font-awesome.scss";
Now you can do for example:
npm run dev
This builds unminified versions of the resources in the correct folders. If you wanted to minify them, you would instead run:
npm run production
And then you can use the font.
"scripts": {
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --
watch --recursive",
"now-start": "node server/server.js",
"deploy": "now --public --dotenv=.env.prod -d"
},
"now": {
"alias": "lendahand"
}
}
Greetings. I'm trying to host a project with Zeit but I am getting an error I don't know how to fix. The error is saying that now is not an internal or external command, but it appears to be showing up in my package.json. I don't know how to remedy this situation. Do you have any suggestions?
The error is:
persona-project2-front#0.1.0 deploy C:\Users\Kim\DevMountain\LendAHandPP
> now --public --dotenv=.env.prod -d
'now' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! persona-project2-front#0.1.0 deploy: `now --public --
dotenv=.env.prod -d`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the persona-project2-front#0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional
logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Kim\AppData\Roaming\npm-cache\_logs\2017-11-
06T23_38_07_616Z-debug.log
Add the directory that now exists in to your PATH/path environmental variable, then you can use now. Make sure to close and re-open your terminal for the env. var. to take effect.
If that's not working, first make sure to install now like this:
npm install now -g to install it globally in your global npm/node_modules directory.
Then test it.
Thirdly, if that is not working, it could be a problem with the environmental variable not being set, so you may need to get root/administrator access and set that in the PATH env var for your system. As for the terminal, maybe try opening your terminal with admin access, or if on linux try something like sudo now.
Finally, after doing your npm install now -g it should display some messages like
'... -> C:\Users\\AppData\Roaming\npm\node_modules\now\download\dist\now ...'
Use that directory to work with now. This would open now process inside your terminal, your directory to now may be different, make sure to set this directory in your PATH if possible.
I am trying browserify and I have the following files in my project directory
node_models/.bin - where browserify is located
sample.js
module.exports = 'Hello, world';
index.js
window.alert(require('./sample'));
Can somebody help me how to run it using browserify? I'm using Windows.
All you should need to do is run this command in the project directory:
node_modules\.bin\browserify index.js > bundle.js
However, you can make things a little more convinient by adding an entry under scripts in your package.json:
{
...
"scripts": {
"bundle": "browserify index.js > bundle.js"
}
}
You can then build the bundle with this command:
npm run bundle
I am trying to use sass with grunt. I have installed ruby, sass and grunt in my path.
The versions are,
node: 0.10.20
npm: 1.3.11
grunt-cli: 0.1.13
grunt: 0.4.5
sass: 3.4.4
my package json is,
"private": true,
"devDependencies": {
"express": "4.x",
"grunt": "~0.4.1",
"grunt-contrib-sass": "~0.3.0",
"grunt-contrib-watch": "~0.4.4"
}
my grunt file is,
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/home.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Now if i tried "grunt" command, i am getting the below error. Any help?
run: grunt or grunt watch or grunt sass
error:
Running "sass:dist" (sass) task
Error: Error generating source map: couldn't determine public URL for the source
stylesheet.
No filename is available so there's nothing for the source map to link
to.
on line of standard input
Use --trace for backtrace.
Warning: Error: Error generating source map: couldn't determine public URL for t
he source stylesheet.
No filename is available so there's nothing for the source map to link
to.
on line of standard input
Use --trace for backtrace. Use --force to continue.
Aborted due to warnings.
any idea?
Looks like you don't have compass installed. You can run gem install compass. In your original example you had your grunt file set up to use compass which would have given you access to compass mixins and features.
Your code looks fine now and should work but seems to not be finding your files. I'll GI e it a go as well when I'm next to a computer.
In the meantime you can try the sourcemap: none option on the sass task.
Update:
Works perfectly fine for me. Could you run tree -I node_modules and post the output(unless you think there's any sensitive info) just to double check the files are in the right place?
I expect it to look something like this
.
├── Gruntfile.js
├── package.json
├── sass
│ └── style.scss
└── style
├── style.css
└── style.css.map
Second update:
Your packages seem significantly older than what's in my fresh setup. Either try starting from scratch or do the following:
Install npm-check-updates
npm install npm-check-updates
And then run the following
npm-check-updates will tell you which packages are outdated
npm-check-updates -u will update those packages in your package.json
npm update to update all your outdated packages.
updating node modules helped..
npm-check-updates will tell you which packages are outdated
npm-check-updates -u will update those packages in your package.json
npm update to update all your outdated packages.