Code Bug Fix: Svelte (routify) + rollup: not watching for css changes in /static

Original Source Link

I want to be able to watch for changes in /static (for example, on global.css)

I am using the following code to watch for changes on my static directory:

        watch: {
            clearScreen: false,
            include: ["static/**", "src/**"]
        },

I also tried calling add “css” to the –extensions option in routify cli:
routify -D --extensions svelte,html,md,css

However nothing works, and I can’t seem to trigger a rebuild on changes to css files… Any advice?

Thanks!

Rollup watches only the files that are included in your bundle (i.e. that have been imported in a file directly or indirectly imported from your entry point — input in your Rollup config). Said otherwise, files that are not imported but merely referenced in index.html can’t rely on Rollup watcher. We would need a copy plugin with its own file watcher, but currently there are none.

If it’s just for CSS assets, you can use rollup-plugin-postcss and import './global.css' from your main.js instead of having it directly in the static directory. Here’s an article with detailed explanations on how to do just that.

Well, since I started writing this answer, there is now a copy plugin with watch capability: rollup-plugin-copy-watch.

So if you need more than just CSS, or if you don’t want to include your global.css into your build process, you can use that instead.

Install in your project:

yarn add -D rollup-plugin-copy-watch

In your rollup.config.js, change the import:

// import copy from 'rollup-plugin-copy'
import copy from 'rollup-plugin-copy-watch'

And add a watch option to the copy plugin (also added verbose in the example, to ensure it works):

      copy({
        targets: [
          { src: staticDir + '/**/!(__index.html)', dest: distDir },
          { src: `${staticDir}/__index.html`, dest: distDir, rename: '__app.html', transform },
        ],
        copyOnce: true,
        flatten: false,

        watch: staticDir,
        verbose: true,
      }),

Tagged : /

Code Bug Fix: Rollup Build failure for SCSS exports to be used in TS ( [!] Error: ‘default’ is not exported by src/styles/variables.scss )

Original Source Link

I’m running into the following rollup build failure where I would like to be able to used exports from a scss file in my typescript files.

The build failure reads as follows:

[!] Error: ‘default’ is not exported by src/styles/variables.scss,
imported by src/components/Layout/Layout.themes.tsx
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/Layout/Layout.themes.tsx (1:7) 1: import vbl from
‘../../styles/variables.scss’;

My rollup config looks as follows:

import scss from 'rollup-plugin-scss';
import typescript from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';

export default {
  input: ['src/index.tsx'],
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
      name: 'Main'
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
      name: 'tree-shaking'
    }
  ],
  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
  plugins: [image(), scss({ output: 'dist/styles.css' }), typescript({ useTsconfigDeclarationDir: true }), terser()]
};

The variables.scss contains:

// colors
$color-blue: #1c4077;
$color-orange: #e87d1e;

:export {
  colorBlue: $color-blue;
  colorOrange: $color-orange;
}

The variables.scss.d.ts typings file contains:

export interface IGlobalScss {
  colorBlue: string;
  colorOrange: string;
}

export const variables: IGlobalScss;

export default variables;

And the Layout.themes.tsx file reads as follows:

import vbl from '../../styles/variables.scss';

export const myTheme = {
  headerColor: vbl.colorBlue,
  footerColor: vbl.colorOrange
}

I’ve tried an import of the non-default export import { variables } from '../../styles/variables.scss'; but it fails as well with:

[!] Error: ‘variables’ is not exported by src/styles/variables.scss,
imported by src/components/Layout/Layout.themes.tsx
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/Layout/Layout.themes.tsx (1:9) 1: import {
variables } from ‘../../styles/variables.scss’;

I am able to serve the project via Storybook, however when I build via Rollup I encounter the error listed above. Please assist me in resolving this build failure?

Here is a CodeSandbox for this example. Extract the zip, yarn and run either yarn start or yarn build to test in VSCode. You’ll notice that yarn start succeeds whereas yarn build will fail as mentioned above.

I think the problem is that the output property is not false.

Here is what the plugin does when that property is set to false:

if (options.output === false) {
  const css = compileToCSS(code)
  return {
    code: 'export default ' + JSON.stringify(css),
    map: { mappings: '' }
  }
}

and this happens in the transform hook, which is invoked before the parsing takes place. This is important because export default ... is treated as a module, meaning you can import it in your js files.

So I think you’ll have to manually bundle that variables file with:

scss({ output: false }).

Now, another problem arises: when you import from the .scss file, you’ll get the :export object stringified.

For example:

"export default ":export {n  colorBlue: #1c4077;n  colorOrange: #e87d1e; }n""

the plugin in use does not seem to handle this case.

So I think the solution involves manipulating that string so that you’d end up with something like this:

`{ colorX: 'value', colorY: 'value' }`

Tagged : / / / /