I'm working on a nuxt-vuetify-app
I want to load globally my main.scss file.
This is my package.json
{
"name": "marketectm",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"#nuxtjs/axios": "^5.12.2",
"core-js": "^3.6.5",
"nuxt": "^2.14.6"
},
"devDependencies": {
"#nuxtjs/vuetify": "^1.11.2",
"fibers": "^5.0.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0"
}
}
In nuxt.config.json and i tried something like
build: {
loaders: {
scss: {
prependData: '#import "#/assets/main.scss';
}
},
}
But changes in my css do not affect.
I've tried this(allowed the docs)
css: [
'#/assets/main.scss'
],
But i have this error:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options
object that does not match the API schema.
- options has an unknown property 'prependData'. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }
at validate (/Users/dariopres/Lavoro/nuxt-market/node_modules/sass-
loader/node_modules/schema-utils/dist/validate.js:104:11)
at Object.loader (/Users/dariopres/Lavoro/nuxt-market/node_modules/sass-
loader/dist/index.js:30:29)
# ./assets/main.scss 4:14-215 14:3-18:5 15:22-223
# ./.nuxt/App.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./node_modules/#nuxt/components/lib/installComponents.js eventsource-polyfill
webpack-hot-middleware/client?
reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=
client
./.nuxt/client.js
edit
i found the solution, i had to downgrade sass-loader to 7.3.1 and then worked simply doing
css: [
'#/assets/main.scss'
],
i solved this problem downgrading sass-loader to #7.3.1, hope this can help someone else ;)
Related
When I try run npm run dev in my nuxt project. I get an error like this.
Using default Tailwind CSS file from runtime/tailwind.css nuxt:tailwindcss 21:02:57
FATAL Cannot destructure property 'nuxt' of 'this' as it is undefined. 21:02:57
at postcss8Module (node_modules/#nuxt/postcss8/dist/index.js:15:10)
at installModule (node_modules/#nuxt/kit/dist/index.mjs:435:21)
at async setup (node_modules/#nuxtjs/tailwindcss/dist/module.mjs:186:7)
at async ModuleContainer.normalizedModule (node_modules/#nuxt/kit/dist/index.mjs:167:5)
at async ModuleContainer.addModule (node_modules/#nuxt/core/dist/core.js:167:20)
at async ModuleContainer.ready (node_modules/#nuxt/core/dist/core.js:34:7)
at async Nuxt._init (node_modules/#nuxt/core/dist/core.js:342:5)
Package.json.
I just created a new nuxt project using "npm init nuxt-app myhealth"
{
"name": "myhealth",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.25.3",
"nuxt": "^2.15.8",
"vue": "^2.7.10",
"vue-server-renderer": "^2.7.10",
"vue-template-compiler": "^2.7.10"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^5.3.3",
"postcss": "^8.4.17"
}
}
Solve this problem with these steps:
Install the development dependencies again as instructed in the tailwind documentation
Remove '#nuxtjs/tailwindcss' and add '#nuxt/postcss8' to nuxt.config.js
Configure the nuxt.config.js build property by adding
build: {
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
Reference: https://tailwindcss.com/docs/guides/nuxtjs
When I try to run npm run generate it is giving me this error
It should generate the static nuxtjs site.
Before it was on Nuxt-3-rc and it was building site successfully. As I converted it to Nuxt 3.0 Stable it is giving me this error.
Package.json
{
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"start": "nuxt dev",
"generate": "nuxt generate ",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"vite:build": "vite build"
},
"devDependencies": {
"#fortawesome/free-brands-svg-icons": "^6.2.0",
"#fortawesome/free-solid-svg-icons": "^6.2.0",
"#nuxt/postcss8": "^1.1.3",
"#nuxtjs/fontawesome": "^1.1.2",
"#nuxtjs/tailwindcss": "^5.3.3",
"#tailwindcss/forms": "^0.5.3",
"autoprefixer": "^10.4.13",
"nuxt": "3.0.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4"
},
"dependencies": {
"#a1ter/nuxt-auth-aws-cognito-scheme": "^0.0.12",
"#headlessui/vue": "^1.4.2",
"#mdi/js": "^7.0.96",
"#nuxtjs/auth-next": "^5.0.0-1637745161.ea53f98",
"#pinia/nuxt": "^0.4.2",
"amazon-cognito-identity-js": "^5.2.10",
"aws-amplify": "^4.3.21",
"chart.js": "^3.9.1",
"numeral": "^2.0.6",
"pinia": "^2.0.22",
"readable-stream": "^4.2.0",
"rollup-plugin-node-polyfills": "^0.2.1"
}
}
I found the solution.
I am using AWS sdk with nuxt 3 which is causing issues.
In Nuxt.config file instead of
vite: {
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser'
}
},
// temp-fix for dev, it breaks build for now (see: https://github.com/nuxt/framework/issues/4916)
define: {
global: {}
}
},
Using this would help. Github Issue
vite: {
resolve: {
alias: {
'./runtimeConfig': './runtimeConfig.browser'
}
},
// temp-fix for dev, it breaks build for now (see: https://github.com/nuxt/framework/issues/4916)
define: {
'window.global': {}
}
},
Building a project using NUXT and Tailwind 2. I get the error
Error: Can't resolve '#tailwindcss/base'
My package.json file is:
{
"name": "vite-example",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"core-js": "^3.8.3",
"nuxt": "^2.14.12"
},
"devDependencies": {
"#nuxtjs/tailwindcss": "^3.4.2",
"#tailwindcss/postcss7-compat": "^2.0.3",
"autoprefixer": "^9.0.0",
"nuxt-purgecss": "^1.0.0",
"nuxt-vite": "0.0.36",
"postcss": "^8.1.9",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-nested": "^5.0.5",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.3"
}
}
My nuxt.config.js file has
build: {
postcss: {
plugins: {
'postcss-import': {},
tailwindcss: path.resolve(__dirname, './tailwind.config.js'),
'postcss-nested': {}
}
},
preset: {
stage: 1 // see https://tailwindcss.com/docs/using-with-preprocessors#future-css-featuress
}
}
And then my tailwind.css is
#import "tailwindcss/base";
#import "tailwindcss/components";
#import "tailwindcss/utilities";
Prefix your path with tilde ~
#import "~tailwindcss/base";
#import "~tailwindcss/components";
#import "~tailwindcss/utilities";
Also there is a special directive called tailwind. So you may try
#tailwind base;
#tailwind components;
#tailwind utilities;
I'm using Vue.js 3.
The following eslint-plugin-vue warning appears to warn using the rules in Vue.js 2.
<MyComponent v-model:propName="foo"/> This writing style is supported in Vue.js 3.
How to make it compatible with Vue.js 3?
<MyInputComponent
v-model:value="state.value"
/>
// [vue/valid-v-model] 'v-model' directives require no argument. eslint-plugin-vue [7, 9]
.eslintrc.js
module.exports = {
extends: [
'plugin:vue/vue3-recommended',
]
}
package.json
{
"name": "ProjectName",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"typescript": "^4.1.2",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/compiler-sfc": "^3.0.2",
"eslint-plugin-vue": "^7.1.0",
"vite": "^1.0.0-rc.8"
}
}
This worked for me - ignore the rule in .eslintrc.js:
rules: {
"vue/no-v-model-argument": "off",
},
Add these deps:
"#babel/core": "^7.12.10",
"#babel/eslint-parser": "^7.12.1",
"eslint": "^7.18.0",
install them:
npm i -D eslint #babel/core #babel/eslint-parser
change eslint.js
parser: '#babel/eslint-parser',
What is wrong with this code ...IE 11 throwing
TypeError: Object doesn't support property or method 'assign'...chrome is behaving fine
import React from 'react';
import Select,{components} from 'react-select';
import { colourOptions } from '../react-select_Samples/data.js';
const Option = props => {
return ( <div>
<components.Option {...props}><input type="checkbox" checked={props.isSelected} onChange={() => null} />{props.label}
</components.Option></div> );
};
export class SampleDropdown extends React.Component {
render() {
return (
<Select
className="basic-single"
classNamePrefix="select"
defaultValue={colourOptions[4]}
isSearchable
name="color"
options={colourOptions}
components={{ Option}}
hideSelectedOptions={false}
isMulti
/>
);
}
}
here is package.json ...
it has following packages
"bootstrap(^3.4.1), es6-promise-promise(^1.0.0), react(^16.8.6), react-bootstrap(^0.31.5), react-dom(^16.8.6), react-router-bootstrap(^0.25.0), react-router-dom(^5.0.0), react-scripts(3.0.0), react-select(^2.4.3), rimraf(^2.6.3), whatwg-fetch(^3.0.0"
{
"name": "reports_react",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.4.1",
"es6-promise-promise": "^1.0.0",
"react": "^16.8.6",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.8.6",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.0",
"react-select": "^2.4.3",
"rimraf": "^2.6.3",
"whatwg-fetch": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
When the React app is being build (dev or prod), spread operations are being transformed into Object.assign assignments.
A solution would be to use the babel-polyfill package and import right at the top of your entry point (index.js by default) to ensure correct functionality.
Another solution is to eject your react app using yarn eject, which will allow you to configure the build procedure of your app. You might have to delete the node_modules folder and reinstall your packages.
After ejecting you have to install the #babel/plugin-transform-object-assign package using yarn add #babel/plugin-transform-object-assign --dev and add the following to your package.json under the attribute babel:
{
...
"babel": {
"presets": ["react-app"],
"plugins": ["#babel/plugin-transform-object-assign"]
}
...
}
or the following to any babel configuration file:
{
"presets": ["react-app"],
"plugins": ["#babel/plugin-transform-object-assign"]
}
This will transform all Object.assign so they can be used inside unsupported environments (like IE11).
Ejecting is necessary for this method as facebook has the configurations for their create-react-app built-in to provide functioning defaults.