I'm trying to use the dart-sass module to compile some SCSS in my React project with Typescript. I installed the module, imported it, and got the error in the title. What could it be? Some type of imports I tried:
import { renderSync } from 'sass';
import sass from 'sass';
const sass = require('sass');
Everything throws the following error:
TypeError: The "original" argument must be of type Function - SASS
Try to follow these steps i think it will fix your problem :
Add node-sass to your project
$ npm i node-sass --save-dev
Include node-sass in your Gruntfile
const sass = require('node-sass');
In your sass options, change the following line
from
implementation: 'sass-dist'
to
implementation: sass
Related
I am building a Next JS application. To admit, this is my first exposure to Next JS. Now, I am having a problem using SCSS with my Next JS application. I have created a file called, assets/auth.scss. Then I imported it into pages/_app.js as follow.
import '../assets/auth.scss';
When I run "npm run dev", I am getting the following error.
./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/nex
t/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!./assets/auth.scss
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0 || ^5.0.0.
Error: Cannot find module 'C:\Users\Acer\Desktop\shar-kya-mal-next-js\nextjs-blog\.next\build-manifest.json'
Require stack:
Then I tried installing node-sass package too. It still does not work. How can I fix it?
Do you use npm install sass or node sass? Every next project where i will use scss i use npm install sass and it works normally. Do you do something different?
Try to use npm install sass or yarn install sass
I want to use bs treeview.js library in my laravel project and i don't know how to do it. So far I have done the following:
npm install --save bstreeview
I added require ('bstreeview'); in resources/js/app.js
When I try to compile it with npm run dev I get the
ERROR in ./resources/js/app.js Module not found: Error: Can't resolve
'./bstreeview' in (...)
What am I doing wrong?
i have check this package there is not index.js
so you can't import directly you can include file like this
import 'bstreeview/dist/js/bstreeview.min.js';
require ('bstreeview'); it's means node is looking for index.js insde
node_module/bstreeview/index.js but in this package it is not there so u need to manually import like above mentioned
for
jquery
run npm i jquery
and inside bootstrap.js add this
window.$ = window.jQuery = require('jquery');
I have clear Laravel 5.7 installation and I need to install izimodal package
So I have installed by npm install izimodal.
For the next step, I initialized this package in my /resources/js/bootstrap.js like:
import iziModal from 'izimodal/js/iziModal';
$.fn.iziModal = iziModal;
and run npm run dev to compile app.js
At this stage, the package was successfully imported and working but I missing CSS part of izimodal... How can I correctly initialize this package with CSS? I have tried this code in my webpack.mix.js but it does not work:
mix.copy('node_modules/izimodal/css/iziModal.css', 'resources/css');
mix.styles([
'resources/css/reset.css',
'resources/css/style.css'
], 'public/css/app.css');
Solved. Just added to my app.scss
// npm-package
#import "~izimodal/css/iziModal.css";
// Custom CSS
#import "../css/reset.css";
#import "../css/style.css";
I followed the foundation tutorial to create a new project. So I compile and watch the sass files with foundatoin watch which compile my files and stream the output to the localhost but I get this error when I am trying to import compass by typing #import "compass"; :
Error in plugin 'sass'
Message:
src\assets\scss\app.scss
Error: File to import not found or unreadable: compass
Parent style sheet: C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/src/assets/scss/app.scss
on line 7 of src/assets/scss/app.scss
>> #import "compass";
I am really a newbie to gulp, gem and all this stuff, so I tried to add compass by running bower install compass but this doesn't help. I already installed compass with gem by running gem install compassand this doesn't fix the problem.
So I searched to modify the gulp file, but I don't know anything about it, I found this post and I tried to add .pipe(sass({ compass: true, sourcemap: true, style: 'compressed' })) into my sass pipe. And this leads me to this error:
'sass' errored after 7.62 s
[19:33:49] TypeError: Cannot read property 'isFile' of undefined
at isFile (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:12:20)
at loadAsFileSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:42:17)
at loadAsDirectorySync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:68:16)
at loadNodeModulesSync (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:77:21)
at Function.module.exports [as sync] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\node_modules\resolve\lib\sync.js:27:17)
at requireFn (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:64:25)
at Object.defineProperty.get [as sourcemaps] (C:\Users\Kevin\Dropbox\Work\Perso\2016_01_KMStudio Site\km_website\node_modules\gulp-load-plugins\index.js:103:41)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:79:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
at sass (C:/Users/Kevin/Dropbox/Work/Perso/2016_01_KMStudio Site/km_website/gulpfile.babel.js:80:11)
Since I know nothing about gulp, streaming and sass compiling, I am wondering if someone could help me to add compass' mixins to my project. I am on Windows.
"name": "sass-loader",
"version": "2.0.1",
"description": "Sass loader for webpack"
sass-loader doesn't compile scss built in method - selector-parse [http://sass-lang.com/documentation/Sass/Script/Functions.html#selector_parse-instance_method]
ERROR in ./~/css-loader!./~/sass-loader!./js/symbols/svg/toggles/switch.scss
Module build failed:
#each $selector in selector-parse(#{&}) {
^
Invalid selector after .show-on-all-pagesselector-parse
any ideas? does node-sass support these built in scss methods? what loader should I use? Is there a webpack loader based on sass command line like grunt-contrib-sass?
This can be solved by editing the webpack sass-loader.
node-sass supports v3 functions (experimental feature).
Can be done by adding in the options parameters an object with mapping of functions to run.
see: functions (>= v3.0.0) section at node-sass