Open risalfajar opened 3 years ago
I am using template from https://www.npmjs.com/package/routify-ts, that has built in routify, nollup and HMR.
However when I have installed Smelte and tried to run it using HMR: npm run dev, the css won't be generated.
npm run dev
"scripts": { "dev": "run-p routify nollup", "build": "routify -b && rollup -c" "rollup": "rollup -cw", "nollup": "nollup -c --verbose", "routify": "routify", }
Here's the css loaded in the browser looks like:
But when I am using npm run rollup, or npm run build everything works normally.
npm run rollup
npm run build
rollup config:
import svelte from 'rollup-plugin-svelte-hot' import Hmr from 'rollup-plugin-hot' import resolve from '@rollup/plugin-node-resolve' import commonjs from '@rollup/plugin-commonjs' import livereload from 'rollup-plugin-livereload' import { terser } from 'rollup-plugin-terser' import typescript from '@rollup/plugin-typescript' import { copySync, removeSync } from 'fs-extra' import { spassr } from 'spassr' import getConfig from '@roxi/routify/lib/utils/config' import autoPreprocess from 'svelte-preprocess' import postcssImport from 'postcss-import' import smelte from 'smelte/rollup-plugin-smelte' import { nodeResolve } from '@rollup/plugin-node-resolve'; const { distDir } = getConfig() // use Routify's distDir for SSOT const assetsDir = 'assets' const buildDir = `${distDir}/build` const isNollup = !!process.env.NOLLUP const production = !process.env.ROLLUP_WATCH // clear previous builds removeSync(distDir) removeSync(buildDir) const serve = () => ({ writeBundle: async () => { const options = { assetsDir: [assetsDir, distDir], entrypoint: `${assetsDir}/__app.html`, script: `${buildDir}/main.js`, } spassr({ ...options, port: 5002 }) spassr({ ...options, ssr: true, port: 5005, ssrOptions: { inlineDynamicImports: true, dev: true } }) }, }) const copyToDist = () => ({ writeBundle() { copySync(assetsDir, distDir) }, }) export default { preserveEntrySignatures: false, input: ['src/main.ts'], output: { sourcemap: !production, format: 'esm', dir: buildDir, // for performance, disabling filename hashing in development chunkFileNames: `[name]${production && '-[hash]' || ''}.js`, }, plugins: [ svelte({ compilerOptions: { // enable run-time checks when not in production dev: !production }, emitCss: false, hot: isNollup, preprocess: [ autoPreprocess({ postcss: { plugins: [postcssImport()] }, defaults: { style: 'postcss' }, }), ], }), smelte({ purge: production, output: `${distDir}/global.css`, // it defaults to static/global.css which is probably what you expect in Sapper postcss: [postcssImport()], // Your PostCSS plugins whitelist: [], // Array of classnames whitelisted from purging whitelistPatterns: [], // Same as above, but list of regexes tailwind: { colors: { primary: '#b027b0', secondary: '#009688', error: '#f44336', success: '#4caf50', alert: '#ff9800', blue: '#2196f3', dark: '#212121', }, // Object of colors to generate a palette from, and then all the utility classes darkMode: false, }, // Any other props will be applied on top of default Smelte tailwind.config.js }), // resolve matching modules from current working directory resolve({ browser: true, dedupe: importee => !!importee.match(/svelte(\/|$)/), }), nodeResolve(), commonjs(), typescript({ sourceMap: !production, inlineSources: !production, }), production && terser(), !production && !isNollup && serve(), !production && !isNollup && livereload(distDir), // refresh entire window when code is updated !production && isNollup && Hmr({ inMemory: true, public: assetsDir }), // refresh only updated code { // provide node environment on the client transform: code => ({ code: code.replace(/process\.env\.NODE_ENV/g, `"${process.env.NODE_ENV}"`), map: { mappings: '' }, }), }, production && copyToDist(), ], watch: { clearScreen: false, buildDelay: 100, }, }
I am using template from https://www.npmjs.com/package/routify-ts, that has built in routify, nollup and HMR.
However when I have installed Smelte and tried to run it using HMR:
npm run dev
, the css won't be generated.Here's the css loaded in the browser looks like:
But when I am using
npm run rollup
, ornpm run build
everything works normally.rollup config: