I currently have a Next JS project. In my project I have a directory
src
In here I have pages, styles, lib
in lib I have a file config.js
it contains some variables which are exported like so:
export { MEDUSA_BACKEND_URL, queryClient, medusaClient }
I then attempt to import it into my _app.js file
import { MEDUSA_BACKEND_URL, queryClient } from "#lib/config"
I get an error:
./src/pages/_app.js:1:0
Module not found: Can't resolve '#lib/config'
I incorrectly assumed that out of the box I could import lib or modules from the directories like so: #lib, #modules
Is there something else I need to add?
From here
You have to create jsconfig.json and inside the file:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#pages/*": ["pages/*"],
"#components/*": ["components/*"],
"#lib/*": ["utils/*"]
}
}
}
Related
I am trying to set up a basic (css) library with vanilla TS and Vite 4.
I want to have a main js and css file at the top level so you can import the whole thing in one go. I also want to have component level imports where you can chose to just import the components js + css. The combined css and JS files are working fine; and the individual component JS file is working fine too.
Currently I'm running into the problem where I can't seem to keep an isolated version of the CSS files next to the JS files after bundling. My build is currently creating :
I've gone over the docs of both Vite and Rollup but I can't seem to figure out how to do the same to my CSS as I'm doing to my JS.
dist
--components
----button
------button.js
--main.css
--main.js
My preferred output would be:
dist
--components
----button
------button.js
------button.css
--main.css
--main.js
In my `main.ts` I'm importing:
import './style.scss'
import './tokens.scss'
import './components/button/button.scss'
vite.config.js
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
cssCodeSplit: false,
manifest: true,
rollupOptions: {
output: {
assetFileNames: () => 'main[extname]',
}
},
lib: {
formats: ['es'],
entry: {
main: resolve(__dirname, 'src/main.ts'),
button: resolve(__dirname, 'src/components/button/button.ts')
},
name: 'CSSFramework',
fileName: (_, fileName) => fileName === 'main' ? '[name].js' : 'components/[name]/[name].js',
},
},
});
Thanks in advance !
I have a Next.js Application with a main.scss global css file imported in the pages/_app.js file.
_app.js
import '../global-styles/main.scss'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
The styles from this file work.
I also have some modular scss files attached to components, using [component].module.scss.
I have written a variable in my variables.scss file, one of the files which I #import in main.scss,
variables.scss
$mobile: 750px;
main.scss
#import './fonts.scss';
#import './variables.scss';
#import './global.scss';
However, when I try to use this variable in one my modular css, I get an error
./module-styles/navbar.module.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./node_modules/postcss-loader/src??__nextjs_postcss!./node_modules/resolve-url-loader??ref--5-oneOf-3-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./module-styles/navbar.module.scss)
SassError: Undefined variable: "$mobile".
on line 19 of /Users/Parv/Documents/reactx/module-styles/navbar.module.scss
>> #media (max-width: $mobile) {
---------------------------^
My question is, why aren't my global variables which I declare in my main.scss coming through?
the easier way is to add a file with variable import and add alias to tsconfig
sassOptions: {
includePaths: ['./src'],
prependData: `#import "~#styles/variable.scss";`,
}
Update:
In file next.config.js need add this code (you need to create it if there is no such file)
module.exports = (phase, {defaultConfig}) => {
if ('sassOptions' in defaultConfig) {
defaultConfig['sassOptions'] = {
includePaths: ['./src'],
prependData: `#import "~#styles/variables.scss";`,
}
}
return defaultConfig;
}
In file tsconfig.json need add alias
"baseUrl": ".",
"paths": {
...
"#styles/*": [
"src/styles/*"
],
...
Then create file with styles on path: src/styles/variable.scss in variable.scss you can import other scss file
It is not related to Next.js, but to the way sass-loader works.
Each import of scss file from js file is treated as an isolated sass env, therefore, there is no such thing "global variables".
This behaviour requires you to import the variables.scss file from each scss file that uses one of the variables.
Side note, It is important that these common scss files (such your variables.scss) will not contain "regular" css, because if so, they will be duplicated many times (the amount of imports).
Just add this to your next.config.js file and restart
const path = require('path')
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
prependData: `#import "main.scss";`
}
}
Apparently you can only import variables from a module file, not a global file.
Import variables.scss into your module's SCSS file, then import your variables from your module:
variables.scss:
$my-color = #123456;
:export {
myColor: $my-color;
}
page.module.scss:
#import './variables.scss';
page.jsx:
import color from './page.module.scss'
console.log(color.myColor); // '#123456'
This worked for me.
I solve it by adding my global variables to next.config.js. It is not a good solution but it works.
module.exports = {
sassOptions: {
includePaths: [path.join(__dirname, 'styles')],
prependData: `
$primary-font-regular: 'Gotham';
$primary-font-medium: 'Gotham';
$default-font-size: 16px;
$h1: 5.208vw;
$h4: 1.458vw;
$primary-color: #000000;
$gray: #CCCCCC;
`,
},
};
You can follow this link for the answer: https://github.com/vercel/next.js/pull/12277
I was trying to add global styles in the same way like in angular app, but it totally does not work.
My libraries' name is example-lib, so I added styles.css to /projects/example-lib/. I added styles in main angular.json file:
...
"example-lib": {
"root": "projects/example-lib",
"sourceRoot": "projects/example-lib/src",
"projectType": "library",
"prefix": "ngx",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/example-lib/tsconfig.lib.json",
"project": "projects/example-lib/ng-package.json",
"styles": [
"projects/example-lib/styles.css" <!-- HERE
],
},
...
But when I tried build library using command:
ng build example-lib
I got error:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(styles)
I guess that is the other way to add global styles in separate library. Anyone can help me?
I have a workaround for this. Just create the root component of your library without view encapsulation and all its styles will be then global.
my-library.component.ts
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'lib-my-library',
templateUrl: './my-library.component.html',
styleUrls: ['./my-library.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MyLibraryComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
my-library.component.html
<!-- html content -->
my-library.component.scss
#import './styles/core.scss';
Now your my-library.component.scss and core.scss are global
styles/core.scss
body {
background: #333;
}
core.scss is optional, I just like to keep the root files clean.
Update: In case you want your mixins and variables too, then follow this answer.
As #codeepic already pointed out, there is currently a standard solution.
In ng-package.json add
"assets": ["./styles/**/*.css"]
The provided paths should be the paths to your files. At the same time, they will be the paths inside your /dist folder.
On build, the files will be copied to /dist. Users of your library will be able to add them to their global styles as follows.
/* styles.css */
#import url('node_modules/<your-library-name>/styles/<file-name>');
This way you can copy any type of files.
P.S. When used with CSS, do not forget that you can create an index.css file that can be imported just like node_modules/<your-library-name>/styles.
From Compiling css in new Angular 6 libraries:
install some devDependencies in our library in order to bundle the css:
ng-packagr
scss-bundle
ts-node
Create css-bundle.ts:
import { relative } from 'path';
import { Bundler } from 'scss-bundle';
import { writeFile } from 'fs-extra';
/** Bundles all SCSS files into a single file */
async function bundleScss() {
const { found, bundledContent, imports } = await new Bundler()
.Bundle('./src/_theme.scss', ['./src/**/*.scss']);
if (imports) {
const cwd = process.cwd();
const filesNotFound = imports
.filter(x => !x.found)
.map(x => relative(cwd, x.filePath));
if (filesNotFound.length) {
console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - ')}\n`);
throw new Error('One or more SCSS imports failed');
}
}
if (found) {
await writeFile('./dist/_theme.scss', bundledContent);
}
}
bundleScss();
Add _theme.scss inside the /src directory of the library that actually contains and imports all the css that we want to bundle.
Add postbuild npm script to run the css-bundle.ts
Include it in the styles tag in your Application in the angular.json
From this issue solution
Install cpx and scss-bundle as Dev dependencies to your package.json. Then add the following entries in your package.json "scripts" property:
"scripts": {
...
"build-mylib": "ng build mylib && npm run build-mylib-styles && npm run cp-mylib-assets",
"build-mylib-styles": "cpx \"./projects/mylib/src/lib/style/**/*\" \"./dist/mylib/style\" && scss-bundle -e ./projects/mylib/src/lib/style/_style.scss -d ./dist/mylib/style/_styles.scss",
"cp-mylib-assets": "cpx \"./src/assets/**/*\" \"./dist/mylib/assets\"",
...
}
Replace "mylib" with your real library name and then just run in your terminal build-mylib. That would compile your scss assets to your dist folder.
You use this global styles in your actual Angular project just import them in your angular.json file within your project settings:
"styles": [
"src/styles.scss",
"dist/my-shiny-library/_theme.scss"
],
(use dist if your project is in the same workspace, or node_moduled if its an imported library)
1- be sure you are putting your styles inside the library
example:
projects/your-lib-name/assets/styles.css
2- then in your ng-package.json (in the lib for sure) put the assets rule
{
"$schema": ... ,
"dest": ... ,
> "assets": [
> "./assets/*"
> ],
"lib": ...
}
3-
in your application, you can use this asset
"styles": [
"../your-lib-name/assets/styles.css"
]
this is a tutorial
Setup: react, webpack, regular css and style loaders, nothing fancy
I want to be able to replace imported file on build step. Like if I build app with env WITH_THEME=true replace one css file with another with different name.
For example, I have 2 css files, style.css and style.theme.css, in react component I import only one file like this import './style.css' (I don't want to change this line, I know it is possible to make if condition with env var here).
So, if I start webpack with WITH_THEME=true I want it to actually import style.theme.css instead of regular style.css, but only if style.theme.css exists.
I came up with this solution, it is test condition for loader:
// ...
test: filePath => {
if (!/\.(s*)css$/.test(path.extname(filePath))) {
return false;
}
const { dir, name, ext } = path.parse(filePath);
const themeFilePath = `${dir}/${name}.theme${ext}`;
if (WITH_THEME && fs.existsSync(themeFilePath)) {
return false;
} else {
return true;
}
},
// ...
But with this way I need to import both style.css and style.theme.css in the component, so webpack could exlude one of them. Is there a better way to do this? Maybe there are some post-css solutions?
What I've actually ended up with:
I made webpack alias for theme-config file, which I import in every .(s)css file (#import '~scss-config';).
resolve: {
// ...
alias: {
'scss-config': path.resolve(
__dirname,
`./src/styles/config-${env.THEME || 'default'}.scss`
)
}
},
It allows to have multiple theme files, but you only need to import single config file, which got replaced with needed theme file in build step.
What is the best way to have a global css file in Vuejs for all components? (Default css like bg color, button styling, etc)
import a css file in the index.html
do #import in main component
put all the css in the main component (but that would be a huge file)
Import css in your index.html, but if you're using webpack you can just import your stylesheets in your main js config and all your components will get the css.
As comments below suggested if using webpack adding this to main.js works:
import './assets/css/main.css';
I found the best way is to create a new file in the assets folder, I created as global.css but you can name anything of your choice. Then, import this file global.css file in the main.js.
Note: Using this approach you can also create multiple files if you think the global.css is getting really large then simply import all those files in the main.js.
#\assets\global.css
/* move the buttons to the right */
.buttons-align-right {
justify-content: flex-end;
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './routes'
Vue.config.productionTip = false
// Importing the global css file
import "#/assets/global.css"
new Vue({
router,
render: h => h(App)
}).$mount('#app')
In App.vue you can add a style property to declare you CSS file:
<style>
#import './assets/css/global.css';
</style>
You can also do something like this: https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
My folders are mostly structured like this:
- src
- assets
- _global.scss
- _colors.scss
- _fonts.scss
- _paragraphs
- index.scss // <-- import all other scss files.
This also works with normal css.
create a new css file in your assets folder for example : global.css
import "global.css" to main.js
import '#/assets/main.css';
There are to two ways, as I know, to achieve this.
Approach 1
Utilize vue.config.js configuration, less config can also be replaced with sass:
module.exports = {
css: {
loaderOptions: {
less: {
additionalData: `#import '#/style/common.less';`
}
}
}
}
Approach 2
In your .vue file, make your style looks like this:
<style lang="less">
#import (reference) "../../style/variables.less";
#app {
background: #bgColor;
}
</style>
Note: the (reference) flag is used to make variables defined in variables.less take effect. If you don't have variables, #import "../../style/variables.less"; is sufficient to do the trick.
For your reference, you can also take a look at this link:
https://github.com/tjcchen/vue-practice/tree/master/multipage-app
Sass announced their new module system. Why don't you use #use and #forward?
My approach is the best way to use scss with vite.
Use defineConfig to setup global scss (colors, mixin) and reuse in all component without import
css: {
preprocessorOptions: {
scss: {
additionalData: `#use "~/styles/main.scss" as *;`,
},
},
},
Here: code sandbox
create a vue.config.js file in your root directory
Create a styles folder inside your src folder and you can create your global style file here for example base.scss
to use scss install two dependencies
npm install node-loader sass-loader
Inside your vue.config.js paste code from below
module.exports = {
css: {
loaderOptions: {
sass: {
additionalData: `#import "#/styles/base.scss";`
}
}
}
};