How to compile /public/theme SASS -> CSS

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
DougB
Posts: 18
Joined: 07 Jun 2021, 19:09

17 May 2022, 19:45

I've converted my project to use Vite, and in the process found that the .scss files in the /public folder won't get transpiled, because Vite leaves them as-is.

So I've added a build command in my package.json file to do this, however I continue to get errors.

What is the recommended way to compile the theme .scss files to css? Also, why are the SASS files in the /public folder? Shouldn't they be under the /src folder?

When I run:

Code: Select all

npm run compileSass
I get the following error(s):

Code: Select all

C:\Projects\Demos\ultima-vue-3.3.0-demo>npm run compileSass

> ultima@3.3.0 compileSass C:\Projects\Demos\ultima-vue-3.3.0-demo
> sass --no-source-map --load-path=./src/assets/sass ./public

Error: Can't find stylesheet to import.
  
4 @import './designer/_components';
           ^^^^^^^^^^^^^^^^^^^^^^^^
  
  src\assets\sass\theme\_theme_dark.scss 4:9  @import
  public\theme\amber\theme-dark.scss 7:9      root stylesheet

package.json

Code: Select all

{
	"name": "ultima",
	"version": "3.3.0",
	"private": true,
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"serve": "vite preview",
		"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
		"format": "prettier .  --write",
		"compileSass": "sass --no-source-map --load-path=./src/assets/sass ./public "
	},
	"devDependencies": {
		"@vitejs/plugin-vue": "^2.3.2",
		"@vue/compiler-sfc": "^3.2.33",
		"@vue/test-utils": "^2.0.0-0",
		"eslint": "^8.15.0",
		"eslint-config-prettier": "^8.5.0",
		"eslint-plugin-vue": "^8.7.1",
		"postcss": "^8.4.13",
		"postcss-import": "^14.1.0",
		"sass": "^1.51.0",
		"vite": "^2.9.8",
		"vite-plugin-eslint": "^1.6.0"
	},
	"dependencies": {
		"@fullcalendar/core": "^5.7.2",
		"@fullcalendar/daygrid": "^5.7.2",
		"@fullcalendar/interaction": "^5.7.2",
		"@fullcalendar/timegrid": "^5.7.2",
		"@fullcalendar/vue3": "^5.7.2",
		"autoprefixer": "^10.4.7",
		"chart.js": "3.3.2",
		"fullcalendar": "^5.11.0",
		"primeflex": "^3.2.0",
		"primeicons": "^5.0.0",
		"primevue": "^3.12.6",
		"prismjs": "^1.9.0",
		"vue": "^3.2.31",
		"vue-router": "^4.0.15"
	}
}
vite.config.js

Code: Select all


import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import eslintPlugin from 'vite-plugin-eslint';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    eslintPlugin()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
postcss.config.js

Code: Select all

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}

tugce.kucukoglu
Posts: 560
Joined: 23 Oct 2020, 09:28

20 May 2022, 13:32

Hi,

Could you check that your folder structure? 'designer' folder is under the 'assets/sass/theme' folder. If you change the folder structure, please check your paths?


In the older versions, we placed the sass folders in the src folder. But reduce the build size we've replaced them to the public folder.


Best Regards,

Post Reply

Return to “Ultima - PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests