We are using lib/styles/.css file from antd/lib in one our project files. In production build same is not shipped even when antd/package.json defines files at provided location to be sideEffects.
We have tried to set sideEffects: true for all CSS files being picked up from node_modules for CSSLoader in Webpack config's module.rules.
Import statement-
import 'antd/lib/grid/style/index.css';
sideEffects definition in antd/package.json
[
"dist/*",
"es/**/style/*",
"lib/**/style/*",
"*.less",
]
CSSLoader Rules defined as part of our effort to mark required file as sideEffects-
{
include: [/node_modules/],
sideEffects: true,
}
The CSS file imported from antd is not present in production bundles.
P.S. No error message is displayed
Related
New to pnpm, and trying to get my head around some of the basics. But can't find a lot of documentation around it (which often means that it's either very simple, or I'm doing it wrong...).
I have set up a basic pnpm monorepo with an apps and packages folder by basically creating the monorepo folder, running pnpm init and tweaking the result a bit. I got:
package.json
{
"name": "#myorg/root",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
pnpm-workspace.yaml
packages:
- "packages/**"
- "apps/**"
.npmrc
shamefully-hoist=true
Notes:
I did not create an index.js, as I have no idea what to put in there..
I know that I can run/build the various apps from the root folder by adding pnpm run dev with a filter to the scripts section, I've not yet gotten around to setting that up, but I believe it's not critical to running the monorepo. (?)
In the apps folder I've already created some Vue3 apps (this works fine). And now I'd like to move some of the Vue components used there into the packages folder of the monorepo, so I can reuse them in the various apps. This is where i'm getting stuck in the sand...
I'm not entirely sure how much scaffolding you're supposed to add to these shared components. Is each one an entire Vue-project by themselves? (I'm guessing yes), and then, how to specify in that project what parts to export?
I have created the folder "y-theme-select" in the "packages" folder, and ran pnpm init and pnpm add vue on it. Now lets say I want to add the following component (let's keep it very simple):
y-theme-select.vue
<template>
<div>
Hello world!
</div>
</template>
Where do I store it? (eg. packages\y-theme-select\src\y-theme-select.vue?)
How do I export it? (clueless)
How do I import it in a shared project (I recon something like "#myorg/y-theme-select": "1.0.0" in the dependencies section of the package.json?)
How to use Vuetify components in here?
Nb. for completeness sake, found two related questions:
Multiple Vue apps, shared components in a monorepo (unanswered, and doesn't specify pnpm monorepo)
How to create my own component library based on Vuetify
First off, the reason it's not documented at pnpm is that it's, except for a few properties, not a PNPM concern.
Secondly, what I found is that reusable components all share a few basic principles, but other than that can vary fairly wildly in setup.
Thirdly, this answer works. But has a few issues, as described at the end of the answer.
I also want to mention the excellent video by "How To Create A Vue.js Plugin Component" by Erik Hanchett, which laid a foundation to this answer.
UPDATE: I stopped building components. As you add functionality to them there's always some new weird issue. Now that scoped CSS turned out to not work, I've changed direction. Here is a super-simple low-tech solution to creating a library of components in this pnpm monorepo:
import YSwitchLang from "/../../packages/common-vtfy/src/components/YSwitchLang.vue"
Just reference the packages folder from within your apps project. (Fingers crossed I won't run into anything new, but so-far so-good.) The instructions below are still valid, but in this scenario you only need step I.
I. Initialization of the project
I'm creating a package that will hold a few generic and similar Vuetify components, so I will call it "common-vtfy". This project will use Vite+Rollup as bundlers. I also use the rollup-plugin-typescript2 package to create the typescript definitions. You can simply leave out vuetify package if your component doesn't depend on it.
cd packages
pnpm create vue#latest
-> common-vtfy
-> Typescript
-> ESLint
cd common-vtfy
echo auto-install-peers = true > .npmrc
pnpm add -D vuetify rollup-plugin-typescript2
pnpm install
In package.json:
prefix the package name with your monorepo name, like so: "name": "#myorg/common-vtfy".
Move "vue": "^3.2.45" entry to devDependencies (not a biggie to leave it here, because we externalize it as well in the build section of vite.config.ts)
Add peerDependencies (not sure if this is needed, but probably won't hurt):
"peerDependencies": {
"vue": "~3.x",
"vuetify": "~3.x"
}
At this point you could run pnpm dev, and see an otherwise empty Vue project, which has way more stuff than we'll be requiring, so go ahead and delete:
public\favicon.ico
src\assets\logo.*
src\components*
Not sure if we could/should delete the css files from src\assets as well. #TBD.
II. Build component
Now we create the components, and setup App.vue to see the results:
YSwitchTheme.vue
<script setup lang="ts"></script>
<template>
<div>
Hello, I'm YSwitchTheme <v-chip>Vuetify Test</v-chip>
</div>
</template>
And similarly for YSwitchLang.vue
App.vue
<script setup lang="ts">
import YSwitchTheme from "./components/YSwitchTheme.vue" // not required if using the vue plugin system
</script>
<template>
<div>
<YSwitchTheme/>
</div>
</template>
III. Create the plugin
Create two files:
src\components\index.ts
export {default as YSwitchLang} from "./YSwitchLang.vue"
export {default as YSwitchTheme} from "./YSwitchTheme.vue"
I believe that this "registers" the components, but the details are not exactly clear to me.
src\CommonVtfyPlugin.ts
The plugin entry file. More information: https://vuejs.org/guide/reusability/plugins.html#writing-a-plugin
I have tried to export the components both as a plugin, and as a individually importable components, which does not require the user to load it as a plugin. However, this did not end up working, so I've commented out that last bit. The plugin must be imported using the Vue plugin system (more on that later)
import type { App } from "vue"
import { YSwitchLang, YSwitchTheme } from "./components"
// Export as plugin
export default {
install: (app: App) => {
app.component("YSwitchLang", YSwitchLang)
app.component("YSwitchTheme", YSwitchTheme)
}
}
// Export as individually importable components
// export { YSwitchLang, YSwitchTheme }
IV. "Local" testing/usage demonstration
To use the plugin we add it to our main.ts, and this is something we can do in this same project. The resulting code is the same as you would use when you are importing it later in your other projects.
main.ts
Add import:
import CommonVtfyPlugin from './CommonVtfyPlugin'
If you're using Vuetify, then also add:
// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
})
And add the .use clause, in the following manner:
const app = createApp(App)
app.use(vuetify).use(CommonVtfyPlugin)
app.mount('#app')
Now in App.vue, comment out the import statements.
V. Build it
Here we're going to use rollup-plugin-typescript2 to generate the typescript files.
vite.config.ts
Add to the imports:
import vuetify from "vite-plugin-vuetify"
import typeScript2 from "rollup-plugin-typescript2"
Add to the plugins:
vuetify({
autoImport: true,
}),
typeScript2({
check: false,
include: ["src/components/*.vue"],
tsconfigOverride: {
compilerOptions: {
sourceMap: true,
declaration: true,
declarationMap: true,
}
},
exclude: [
"vite.config.ts"
]
})
Add a new section build to the defineConfig:
build: {
cssCodeSplit: false,
lib: {
entry: "./src/CommonVtfyPlugin.ts",
formats: ["es", "cjs"],
name: "CommonVtfyPlugin",
fileName: format => (format == "es" ? "index.js" : "index.cjs"),
},
rollupOptions: {
external: ["vue"],
output: {
globals: {
vue: "Vue"
}
}
}
},
Now you're ready to build it by running pnpm build.
Wrap it up by updating package.json, adding four properties:
"type": "module",
"exports": {
".": "./dist/index.js"
},
"types": "./dist/index.d.ts",
"files": [
"dist"
],
One issue the I've not yet figured out is how to generate a single index.d.ts declarations file. For now I just create the following file by hand in the dist folder. Inspired by the Vuetify project, I have not yet figured out why/how this works.
index.d.ts
declare module '#myorg/common-vtfy' {
import { VueConstructor } from 'vue'
const YSWitchLang: VueConstructor
const YSWitchTheme: VueConstructor
export {
YSWitchLang,
YSWitchTheme
}
}
VI. Use it!
Go back to a project that wants to use these components and add them to the project using pnpm add #myorg/common-vtfy (replace myorg with the name of your monorepo). You should see a new dependency in the package.json file that reads something like "#myorg/common-vtfy": "workspace:^1.0.0".
main.ts or plugins\index.ts (wherever you load your plugins)
Import the components:
import YSwitchTheme from '#myorg/common-vtfy'
import YSwitchLang from '#myorg/common-vtfy'
I was expecting to be able to import the modules using a {}-style import, but this doesn't work. I think this means that we're not correctly exporting the components from the plugin. See issues section.
import { YSwitchTheme, YSwitchLang} from '#myorg/common-vtfy'
And finally, to use the plugin, do:
app.use(YSwitchTheme)
app.use(YSwitchLang)
VII. Updating
At some point you're going to make changes to the component.
Component: Make the changes
Component: pnpm build
Component: Recreate index.d.ts
Application: pnpm update #myorg/common-vtfy
Open issues
Scoped CSS is ignored. I've tried all kinds of different rollup settings.
Confirm that peerDepencies is either a good thing or useless.
I've not been able to figure out how to generate a single index.d.ts typescript declaration file.
Pnpm monorepo update
I think you should run the pnpm update on the whole repo. But haven't dived into that yet.
I will attempt to update and further refine this answer as I gain understanding, and/or when usefull comments are posted here.
I'm currently trying to learn how to implement SASS into my web development projects but I'm struggling a little bit with figuring out how to properly compile my .scss files into one single .css file.
When I run sass --version in my terminal, I receive 1.53.0 compiled with dart2js 2.17.3. As far as extensions go, I'm using Live Sass Compiler by Glenn Marks, and within the settings.json file, my configuration looks like this:
{
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
},
],
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"defaults"
]
}
This is my current project directory:
Current Project Directory Structure
My current issue is that whenever I click Watch Sass, the only file I want to be output is the main.css and main.css.map but it creates an index.css and index.css.map file as well.
I'm trying to implement something similar to the 7 - 1 SASS Architecture, and within each of those folders I created an index.scss that'll contain each file in it's directory, which will then be #forward to the main.scss.
Is there any particular way I can avoid the extra files being created? I'm not too familiar with npm but I've heard it would be more beneficial to learn it in order to utilize SASS as opposed to using a VS Code extension and I'm more than open to taking that approach and scrapping the entire extension as a whole if it proves to be more efficient.
Thank you for your help in advanced, I hope I provided enough information!
Dart sass comes with an inbuilt compiler
Just run the code
sass --watch sass/main.scss css/main.css
This one faulty line is probably the reason for your problem.
Change this:
"liveSassCompile.settings.generateMap": true,
to this:
"liveSassCompile.settings.generateMap": false,
If you decide to stick with my extension then you can specify a single file to output/watch with the liveSassCompile.settings.includeItems setting - as shown below
{
"liveSassCompile.settings.includeItems": [ "/path/to/main.scss" ]
}
Alternatively, and possibly a better solution, you can use a negative glob expression in the liveSassCompile.settings.partialsList to treat every other file as a partial. Then, when any SASS file is saved, it triggers compilation of just your main.scss file
I have this folder structure:
sass/main.sass
css/main.css
js/...
img/...
I want the sass output to go to the css folder, but each time I run sass watcher it creates a new css file within the sass directory among sass files.
Thx for information about using 'Live SASS Compiler' in VS Code.
To set special otuput pathes to your project you need to add the settings for output pathes to the settigns.json of your project:
File: `projectDIR/.vscode/settings.json'
Example for setting the save pathes to output directory:
"settings": {
// output: generate files to ...
// ~ = path starts relative from scss-file
"liveSassCompile.settings.formats":[
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../assets"
},
// ad a compressed version
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../assets"
}
// optional: add more outputs ...
],
}
See also official example in web: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
Additional hint:
VERSION OFF 'LIVE SASS COMPILER' MAY BE OUTDATED
The actual commmon used Extension Live Sass Compiler is not longer supported (for years now). It uses an outdated SASS Version. The most recent features like #use are not supported in that version. You use that outdated version if author is 'Ritwick Dey'.
But there is an active supported fork with same name 'Live SASS Compiler' build by 'Glenn Marks'. As fork it works the same way and the settings are almost the same. Or you can use another actual compiler which is faster as you can use an direct installed SASS Version on your system. In that case you need to change the settings for your project.
Information about that you will find here:
https://stackoverflow.com/a/66207572/9268485
Updated: Correction name of author of supported extension 'Live SASS Compiler' to correct identification of extension.
Go to path: C:\Users\your user\AppData\Roaming\Code\User\settings.json
and change there the "liveSassCompile.settings.formats" section
for example:
the parameter : "savePath": "/Python/CSS",
I have several questions on my ASP.NET MVC CORE 2.2 project.
The main goal is very simple, i want to update my stylesheet and then deploy this result. I have a Site.less, site.css, site.min.css, site.min.css.gz that i want to update with a css class style, a bundleconfig.json with my input css, javascript files to be bundled and a compilerconfig.json that has Site.less as an input and site.css as output. I also have BuildBundlerMinifier installed on my project (NuGet).
Questions:
1- What file should i update when adding some new style: Site.less, site.css or both?
2- What are the steps to minify and bundle before i publish my app?
bundleconfig.json:
[
{
"outputFileName": "wwwroot/css/bundle.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
(...)
"wwwroot/css/Site.min.css"
]
},
(...)
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
compilerconfig.json
[
{
"inputFile": "wwwroot/css/Site.less",
"outputFile": "wwwroot/css/site.css"
}
]
When i rebuild my project in my Output window (Visual Studio 2017) i have the following messages.
Cleaning output from bundleconfig.json,
Done cleaning output file from bundleconfig.json, Begin processing bundleconfig.json, Minified wwwroot/css/bundle.min.css, Done processing bundleconfig.json
Thank you.
My first question is answered.
I have installed an extension in Visual Studio 2017 (Tools -> Extensions and Updates) named Web Compiler. When i make an update in my less file, the css file and min.css are auto generated (min.css.gz is not and don't know why). The files that the code is auto generated are water marked with Generated keyword.
To produce the auto generated files you only need to rebuild the project.
This works with other files but in my case i am only using this ones.
EDIT
My second question is also answered.
I have installed another extension: Bundler & Minifier
To produce bundle you need to have those config json files i have posted in my first post and then open Task Runner Explorer and double click on wwwroot/css/bundle.min.css (inside StyleSheets menu) and the bundle file will be auto generated.
I have a web application built with webpack. I have many styling variations, and those styles are all called style.css and in their own respective directories like
./STYLE_A/style.scss
./STYLE_B/style.scss
./STYLE_F/style.scss
I am supplying a cross-env variable STYLE_DIR to webpack and I want that variable to control where the scss gets included from.
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in the webpack (does nothing)
I've tried:
require(`./${STYLE_DIR}/style.scss`); //in my client.js (ends up including every style.scss from every one of the style directories)
I've tried setting this to a 'process.env' variable in webpack, I've tried using an alias to resolve, there's something I'm just missing.
I got interested in your question, then I did a little research and I think I have a way to make it work.
Steps:
1.
In Webpack config file use DefinePlugin in order to have a constant that can be setup at compile time. You do that in this way:
const GLOBALS = {
'process.env.STYLE_DIR': JSON.stringify(process.env.STYLE_DIR)
};
export default {
entry: [
'./app/index'
],
output: {
path: path.resolve(__dirname, '/dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.DefinePlugin(GLOBALS)
],
...
}
2.
Put your style.scss file in the correct folders (STYLE_A, STYLE_B and STYLE_C as you indicated).
3.
In your .js file require your SCSS file as follow (of course be sure to have the corresponding loaders properly setup in Webpack config file):
require(`./${process.env.STYLE_DIR}/style.scss`);
4.
Set the STYLE_DIR variable before you run webpack. Something like this:
export STYLE_DIR = 'STYLE_A'
This is working for me. If I change the STYLE_DIR value before running Webpack I get a different style file imported.
I hope this helps.