title: How to best include assets (images and fonts) referenced in scss files in rollup bundle
body: <p>I am writing a react component library with typescript, sass and rollup, and I want it to be as standalone as possible.</p>
  <p>Does anyone have a suggestion on how to best include assets (images and fonts) referenced in scss files?</p>
  <p>One solution could be some sort of loader (for instance a postcss processor) replacing all image  and font assets referenced in scss files with the base64 version.</p>
  <p>Does anyone have an example where this has been done in an effective manner? Any solutions or suggestions would be highly appreciated </p>
  <p>My rollup config looks like this:</p>
  <pre><code>import peerDepsExternal from &quot;rollup-plugin-peer-deps-external&quot;;
  import resolve from &quot;rollup-plugin-node-resolve&quot;;
  import typescript from &quot;rollup-plugin-typescript2&quot;;
  import scss from 'rollup-plugin-scss'
  import sass from &quot;rollup-plugin-sass&quot;;
  import commonjs from &quot;rollup-plugin-commonjs&quot;;
  import copy from &quot;rollup-plugin-copy&quot;;
  import url from '@rollup/plugin-url';
  
  import packageJson from &quot;./package.json&quot;;
  
  export default {
    input: &quot;src/index.tsx&quot;,
    output: [
      {
        file: packageJson.main,
        format: &quot;cjs&quot;,
        sourcemap: true
      },
      {
        file: packageJson.module,
        format: &quot;esm&quot;,
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        browser: true
      }),
      typescript({ objectHashIgnoreUnknownHack: true }),
      commonjs({
        include: [&quot;node_modules/**&quot;],
        exclude: [&quot;**/*.stories.js&quot;],
        namedExports: {
          &quot;node_modules/react/react.js&quot;: [
            &quot;Children&quot;,
            &quot;Component&quot;,
            &quot;PropTypes&quot;,
            &quot;createElement&quot;
          ],
          &quot;node_modules/react-dom/index.js&quot;: [&quot;render&quot;]
        }
      }),
      scss({
      }),
      sass({
        insert: true
      }),
      copy({
        targets: [
          {
            src: &quot;src/variables.scss&quot;,
            dest: &quot;build&quot;,
            rename: &quot;variables.scss&quot;
          },
          {
            src: &quot;src/typography.scss&quot;,
            dest: &quot;build&quot;,
            rename: &quot;typography.scss&quot;
          },
          {
            src: &quot;src/assets&quot;,
            dest: &quot;build/&quot;,
          },
        ]
      })
    ]
  };
  </code></pre>
  <p><strong>UPDATE:</strong></p>
  <p>So what I did might be hacky, but it solved my problem.</p>
  <p>I added a postcss-plugin in the plugins array in rollup.config.js, <strong>after</strong> a commonjs plugin.</p>
  <pre><code>postcss({
        inject: true,
        plugins: [
          postcssInlineBase64({
            baseDir: 'src/assets/',
          }),
          postcssUrl({
            url: 'inline',
          }),
          atImport({
            path: path.resolve(__dirname, '../'),
          }),
        ],
      }),
  </code></pre>
  <p>I also use storybook, which internally uses webpack, so I had to recreate the same in .storybook/webpack.config.js:</p>
  <pre><code>config.module.rules.push({
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            inject: true,
            ident: 'postcss',
            plugins: [
              postcssInlineBase64({
                baseDir: 'src/assets/',
              }),
              postCssUrl({ url: 'inline' }),
              atImport({
                path: path.resolve(__dirname, '../'),
              }),
            ],
          },
        },
        'sass-loader',
      ],
      include: path.resolve(__dirname, '../'),
    });
  </code></pre>
  <p>Now, when using the url directive in scss (or elsewhere probably), I can surroud any path with:</p>
  <p><code>b64---&lt;SOME_PATH&gt;---</code></p>
  <p>For instance:</p>
  <pre><code>@font-face {
    font-family: 'Open Sans';
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    src: url('b64---./fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff2---') format('woff2'),
      url('b64---./fonts/open-sans/open-sans-v15-latin-ext_latin-300.woff---') format('woff');
  }
  </code></pre>
  <p>which makes post css bundle the asset as base64.</p>
  <p>To anyone who might come across this post. Good luck! Hope this helps!</p>