Mixins may not be defined within control directives or other mixins - node-sass

I try to install npm packages. All packages install properly.
But when I try to run application using npm start at that time below error occurs:
ERROR in
./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module build failed:
undefined
^
Mixins may not be defined within control directives or other mixins.
in
D:\DailyJS\CIDE_SCHOOL_DEV\node_modules\#angular\material_theming.scss
(line 2440, column 10)
Error:
undefined
^
Mixins may not be defined within control directives or other mixins.
in
D:\DailyJS\CIDE_SCHOOL_DEV\node_modules\#angular\material_theming.scss
(line 2440, column 10)
at options.error
(D:\DailyJS\CIDE_SCHOOL_DEV\node_modules\node-sass\lib\index.js:291:26)
# ./src/styles.scss 4:14-187
# multi ./node_modules/font-awesome/scss/font-awesome.scss
./src/styles.scss
webpack: Failed to compile.
I don't know why this happens?
Previously I cloned the repository from Github, and then installed npm packages by using npm install. Then it worked.
But today, it gives this error:
Mixins may not be defined within control directives or other mixins.

Now, i found the solution there was an issue with node-sass pacakge.
so install the
npm i node-sass#4.8.1
package then it works.

Related

Cannot find module 'jquery.tagsinput-revisited

I've installed jquery.tagsinput-revisited via npm, which was provided here
npm i jquery.tagsinput-revisited
Then, I've added
require('jquery.tagsinput-revisited');
in one of my js file and
#import '~jquery.tagsinput-revisited/src/jquery.tagsinput-revisited';
in one of SCSS file.
Now, I'm having these error while npm run watch
This dependency was not found:
jquery.tagsinput-revisited in ./resources/js/bundle1.js
To install it, you can run: npm install --save
jquery.tagsinput-revisited
ERROR in ./resources/js/bundle1.js Module not found: Error: Can't
resolve 'jquery.tagsinput-revisited' in
'C:\xampp\htdocs\vetforum\www\resources\js' #
./resources/js/bundle1.js 9:0-37 # multi ./resources/js/bundle1.js
SCSS file get successfully compiled,but there seems an error in the js file.
After several attempts, i've done like this
In JS file
require('../vendors/tagsinput/jquery.tagsinput-revisited');
In SCSS file
#import '../vendors/tagsinput/jquery.tagsinput-revisited';

Cannot find module 'tailwindcss'

I am trying out tailwindcss with my Vue project and while I solved some issue I had with the routing (while trying to break down my code into smaller components), I think I broke something else.
The code was compiling before I added my new routes. I can't seem to find what is wrong in this case.
Failed to compile.
./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'
you can check out this repo, has very few files https://github.com/anaivanm/vue-tw/
First :
npm run dev
Then
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
For More Info :
Tailwind Docs
Also check this out :Restarting NPM

Failed to Compile After Installing Vuetify with Vue CLI 3

I tried to create a new Vue app with Vuetify by using the command from Vuetify homepage.
Following is the command I used:
npm install #vue/cli -g
vue create my-app // all options are default settings when creating
cd my-app
vue add vuetify // all options are default settings when running
All commands above mentioned completed perfectly. However, after I launch the hot-reload developing environment by the following command.
npm run serve
An error would occur as the following standard output.
> my-app#0.1.0 serve /home/seanwu/my-app
> vue-cli-service serve
INFO Starting development server...
94% after seal
ERROR Failed to compile with 1 errors 3:05:24 PM
error in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
BrowserslistError: [BABEL] /home/seanwu/my-app/src/main.js: /home/seanwu/my-app contains both .browserslistrc and package.json with browsers (While processing: "/home/seanwu/my-app/node_modules/#vue/babel-preset-app/index.js$0")
at /home/seanwu/my-app/node_modules/browserslist/node.js:239:15
at eachParent (/home/seanwu/my-app/node_modules/browserslist/node.js:46:18)
at Object.findConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:219:20)
at Function.loadConfig (/home/seanwu/my-app/node_modules/browserslist/node.js:150:37)
at browserslist (/home/seanwu/my-app/node_modules/browserslist/index.js:187:31)
at getTargets (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/targets-parser.js:133:50)
at _default (/home/seanwu/my-app/node_modules/#babel/preset-env/lib/index.js:184:46)
at /home/seanwu/my-app/node_modules/#babel/helper-plugin-utils/lib/index.js:19:12
at loadDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:163:14)
at cachedFunction (/home/seanwu/my-app/node_modules/#babel/core/lib/config/caching.js:42:19)
at loadPresetDescriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:233:63)
at config.presets.map.descriptor (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:68:19)
at Array.map (<anonymous>)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:66:38)
at recurseDescriptors (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:92:27)
at loadFullConfig (/home/seanwu/my-app/node_modules/#babel/core/lib/config/full.js:106:6)
# multi (webpack)-dev-server/client?http://192.168.1.76:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have no idea why this would happen as being new to front-end development and following every instruction from the Quick Start web page. Maybe there are some stupid mistakes I made to cause this error.
What Node/npm version are you using? I'd assume the official tutorial works/worked at some point. I'd use nvm to install different Node.js versions. That also changes the npm version. Then try npm install and npm start again.
Or you could delete .browserslistrc in /home/seanwu/my-app, so you don't have two conflicting files.

Include bootstrap in nuxt.js

When I type
npm install bootstrap
I got this error:
ERROR Failed to compile with 4 errors 21:39:34
These dependencies were not found:
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue in ./pages/Index.1.vue
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue in ./pages/Index.vue
To install them, you can run: npm install --save !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue
These relative modules were not found:
* ../.nuxt/components/Footer in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.vue* ../.nuxt/components/Footer.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.1.vue
What do I do?
The first part means you are missing some loaders that WebPack needs to bundle your styles.
Try running npm install --save vue-style-loader css-loader for that. It will install those two loaders.
These relative modules were not found: signals something else in your Index page, where you are trying to use the Footer component, but failed to import it or register it correctly. Have a look at the Vue Docs about registering your components.

Error with gulp-sass

I get the following error when trying to run 'gulp serve':
[14:14:52] Plumber found unhandled error:
Error in plugin 'gulp-sass'
Message:
#import directives are not allowed inside mixins and functions
Details:
fileName: ./bower_components/bootswatch/spacelab/_bootswatch.scss
lineNumber: 8
I upgraded to the latest node version. Ran "npm rebuild node-sass" and "npm rebuild gulp-sass". I tried reinstalling bower packages and npm packages. Is there any sort of assumption I can make. I can try to reinstall npm packages by hand, but there is about 50 and I am afraid it won't do anything.
Any pointers welcome. Will be here until I solve this. 'npm gulp-sass version' gives the same version as my team has and build works for all of them.
I checked the original source of the Bower component you included and saw the following happening on the line mentioned there:
#mixin web-font($path){
#import url("#{$path}");
}
As far as I know, "imports" are not allowed in libsass (which is the base for gulp-sass), as it would be a conditional import (which isn't allowed for various reasons) and could lead to possible errors. Ruby Sass is a little more forgiving there.
You might want use a different Bootswatch package there (like bootswatch-sass).