My .env (or .env.local):
apiURL=https://<dev-url>
My nuxt.config.js
publicRuntimeConfig: {
apiURL: process.env.NODE_ENV === 'production'
? 'https://<prod-url>'
: process.env.apiURL
},
proxy: {
'/api_vue': {
target: process.env.apiURL,
changeOrigin: true
}
},
Everything works well until I add .local to .env.
Nuxt says:
Error: [HPM] Missing "target" option. Example: {target: │
nuxt-app | │ "http://www.example.org"}
You should import dotenv to load .env variables.
require("dotenv").config()
I also recommend to rename your .env variables to the following format:
apiURL --> API_URL
In a Nuxt project i have created a button component with the following style:
<style lang="scss">
.my-button {
// lots of cool styles and stuff here
$height: 28px;
height: $height;
border-radius: $height / 2;
}
</style>
The problem is the border-radius: $height / 2; line gives this warning:
╷
182 │ border-radius: $height / 2;
│ ^^^^^^^^^^^
╵
components/MyButton.vue 182:20 button-size()
components/MyButton.vue 186:5 root stylesheet
: Using / for division is deprecated and will be removed in Dart Sass
2.0.0.
Recommendation: math.div($height, 2)
It also links to this page describing the deprecation.
However if i add #use "sass:math" to the top of my style tag like so:
<style lang="scss">
#use "sass:math";
//Cool styles and stuff
$height: 28px;
height: $height;
border-radius: math.div($height, 2);
</style>
I get this error:
[Vue warn]: Error in render: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 12:13:59
SassError: #use rules must be written before any other rules.
╷
102 │ #use "sass:math";
│ ^^^^^^^^^^^^^^^^
╵
components/MyButton.vue 102:1 root stylesheet"
I think i need to add the import of #use "sass:math" somewhere in nuxt.config.js file to load it in all components or similar, but i am not able to figure out where.
The css related blocks in my nuxt.config.js currently looks like:
build: {
postcss: {
plugins: {
'postcss-easing-gradients': {},
},
},
},
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
},
css: [
'~/assets/base.scss',
'~/assets/reset.scss',
],
Updating #nuxtjs/style-resources to above version 1.1 and using hoistUseStatements fixed it.
I changed the styleResources object in nuxt.config.js to:
styleResources: {
scss: [
'~/assets/global-inject.scss',
],
hoistUseStatements: true,
},
and added #use "sass:math"; to the top of global-inject.scss.
Updated answer
What if you try this in your nuxt.config.js file?
{
build: {
loaders: {
scss: {
additionalData: `
#use "#/styles/colors.scss" as *;
#use "#/styles/overrides.scss" as *;
`,
},
},
...
}
Or you can maybe try one of the numerous solutions here: https://github.com/nuxt-community/style-resources-module/issues/143
Plenty of people do have this issue but I don't really have a project under my belt to see what is buggy. Playing with versions and adding some config to the nuxt config is probably the way to fix it yeah.
Also, if it's a warning it's not blocking so far or does it break your app somehow?
Old answer
My answer here can probably help you: https://stackoverflow.com/a/68648204/8816585
It is a matter of upgrading to the latest version and to fix those warnings.
I am trying to get my first Jest Test to pass with React and Babel.
I am getting the following error:
SyntaxError: /Users/manueldupont/test/avid-sibelius-publishing-viewer/src/components/TransportButton/TransportButton.less: Unexpected token
> 7 | #import '../variables.css';
| ^
My package.json config for jest look like this:
"babel": {
"presets": [
"es2015",
"react"
],
"plugins": [
"syntax-class-properties",
"transform-class-properties"
]
},
"jest": {
"moduleNameMapper": {
"^image![a-zA-Z0-9$_-]+$": "GlobalImageStub",
"^[./a-zA-Z0-9$_-]+\\.png$": "RelativeImageStub"
},
"testPathIgnorePatterns": [
"/node_modules/"
],
"collectCoverage": true,
"verbose": true,
"modulePathIgnorePatterns": [
"rpmbuild"
],
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react/",
"<rootDir>/node_modules/react-dom/",
"<rootDir>/node_modules/react-addons-test-utils/",
"<rootDir>/node_modules/fbjs",
"<rootDir>/node_modules/core-js"
]
},
So what am I missing?
moduleNameMapper is the setting that tells Jest how to interpret files with different extension. You need to tell it how to handle Less files.
Create a file like this in your project (you can use a different name or path if you’d like):
config/CSSStub.js
module.exports = {};
This stub is the module we will tell Jest to use instead of CSS or Less files. Then change moduleNameMapper setting and add this line to its object to use it:
'^.+\\.(css|less)$': '<rootDir>/config/CSSStub.js'
Now Jest will treat any CSS or Less file as a module exporting an empty object. You can do something else too—for example, if you use CSS Modules, you can use a Proxy so every import returns the imported property name.
Read more in this guide.
I solved this by using the moduleNameMapper key in the jest configurations in the package.json file
{
"jest":{
"moduleNameMapper":{
"\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
"\\.(gif|ttf|eot|svg)$": "<rootDir>/__mocks__/fileMock.js"
}
}
}
After this you will need to create the two files as described below
__mocks__/styleMock.js
module.exports = {};
__mocks__/fileMock.js
module.exports = 'test-file-stub';
If you are using CSS Modules then it's better to mock a proxy to enable className lookups.
hence your configurations will change to:
{
"jest":{
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
}
}
But you will need to install identity-obj-proxy package as a dev dependancy i.e.
yarn add identity-obj-proxy -D
For more information. You can refer to the jest docs
UPDATE who use create-react-app from feb 2018.
You cannot override the moduleNameMapper in package.json but in jest.config.js it works, unfortunately i havent found any docs about this why it does.
So my jest.config.js look like this:
module.exports = {
...,
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|sass|css)$": "identity-obj-proxy"
}
}
and it skips scss files and #import quite well.
Backing my answer i followed jest webpack
Similar situation, installing identity-object-proxy and adding it to my jest config for CSS is what worked for me.
//jest.config.js
module.exports = {
moduleNameMapper: {
"\\.(css|sass)$": "identity-obj-proxy",
},
};
The specific error I was seeing:
Jest encountered an unexpected token
/Users/foo/projects/crepl/components/atoms/button/styles.css:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){.button { }
^
SyntaxError: Unexpected token .
1 | import React from 'react';
> 2 | import styles from './styles.css';
If you're using ts-jest, none of the solutions above will work! You'll need to mock transform.
jest.config.js
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
roots: [
"<rootDir>/src"
],
transform: {
".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/jest-config/file-mock.js",
'.(css|less)$': '<rootDir>/jest-config/style-mock.js'
},
};
file-mock.js
module.exports = {
process() {
return `module.exports = 'test-file-stub'`;
},
};
style-mock.js
module.exports = {
process() {
return 'module.exports = {};';
}
};
I found this working example if you want more details.
Solution of #import Unexpected token=:)
Install package:
npm i --save-dev identity-obj-proxy
Add in jest.config.js
module.exports = {
"moduleNameMapper": {
"\\.(css|less|scss)$": "identity-obj-proxy"
}
}
Update: Aug 2021
If you are using Next JS with TypeScript. Simply follow the examples repo.
Else you will be wasting days configuring the environment.
https://github.com/vercel/next.js/tree/canary/examples/with-jest
I added moduleNameMapper at the bottom of my package.json where I configured my jest just like this:
"jest": {
"verbose": true,
"moduleNameMapper": {
"\\.(scss|less)$": "<rootDir>/config/CSSStub.js"
}
}
I am trying to add global scss variables to my vue project.
I found here(css tricks) and here(vue school) that what i have to do is to install sass-loader running npm i node-sass sass-loaderin the command line.
I also need in my project a vue.config.js file with the following :
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `#import "#/styles/_variables.scss";`
}
}
}
};
where _variables.scss is the file that i want to import globally.
When i run npm run build in my project i get this error :
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: semicolons aren't allowed in the indented syntax.
╷
1 │ #import "#/styles/_variables.scss";
│ ^
╵
If i erase the semicolon :
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: expected ";".
╷
1 │ #import "#/styles/_variables.scss"
│
If found this stackoverflow post that says that depending on my sass-loader version i have to change the prependData to data, where prependData is for "sass-loader": "^8.0.2" and data for "sass-loader": "^7.*.*"
I think the problem is somewhere in here as my sass-loader version is 6.13.4 according to
npm sass-loader -v
When i run npm update sass-loader i don't recieve any message, but the version is still 6.13.4
Accorging to npm the latest sass-loader version is 9.0.2
Does anyone know what am i doing wrong ?
My repository is here
In the latest version of sass-loader, data or prependData will not work. Try additionalData instead
css: {
loaderOptions: {
scss: {
additionalData: `
#import "#/assets/styles/_responsive.scss";
#import "#/assets/styles/_element-variables.scss";
`
},
}
}
They split scss & sass options in vue-cli 4.0.0-beta.3 see this github issue.
...
loaderOptions: {
scss: {
prependData: `#import "#/styles/_variables.scss";`
}
}
...
I am using vue-cli3, when i build using npm run build -- --mode=production, it gives 2 css files and 2 js files.
Everytime i make a code change the name of the file also changes like app.de90cdf7.js and chunk-vendors.a9204242.js.
Is there a way in vue-cli to hardcode the files names as app.js and chunk-vendors.js ?
I'm little late to the party. We can chain webpack to apply name changes.
Using version #vue/cli 5.0.4 in year 2022
const { defineConfig } = require("#vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
chainWebpack : (config) => {
config.output.filename('[name].js');
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
}
});