Use rollup to transform styles before applying scope to scoped styles

[khalyomede]

Version

5.0.0

Reproduction link

None (this is an issue in the build step).

Steps to reproduce

Compile an SFC that requires sass files from node modules.

What is expected?

To find the sass files correctly from node_modules.

What is actually happening?

Sass files are not found.

---

I use the plugin to compile an SFC that import a sass file from node_modules. Here is my rollup.config.js:

import vue from "rollup-plugin-vue";
import commonjs from "rollup-plugin-commonjs";
import nodeResolve from "rollup-plugin-node-resolve";
import babel from "rollup-plugin-babel";
import replace from "rollup-plugin-replace";

const { PRODUCTION } = process.env;

export default {
  input: "src/js/index.js",
  output: {
    format: "iife",
    file: "dist/js/index.js"
  },
  plugins: [
    babel({
      presets: ["@babel/preset-env"],
      runtimeHelpers: true,
      plugins: ["@babel/plugin-proposal-export-default-from"]
    }),
    commonjs(),
    nodeResolve(),
    vue(),
    replace({
      "process.env.NODE_ENV": JSON.stringify(PRODUCTION ? "production" : "development")
    })
  ]
};

And here is my SFC (producing the error):

<template lang="pug">
  mdc-button Test
</template>
<script>
import { MdcButton } from "material-components-web-vue";

export default {
  components: {
    MdcButton
  }
};
</script>
<style lang="scss">
@import "@material/button/mdc-button";
</style>

And here is the error:

$ rollup -c

src/js/index.js → dist/js/index.js...
[!] (plugin VuePlugin) Error: Error: Can't find stylesheet to import.
  src\js\page\Home.vue 14:9  root stylesheet
src\js\page\Home.vue
Error: Error: Can't find stylesheet to import.
  src\js\page\Home.vue 14:9  root stylesheet
    at Promise.all.descriptor.styles.map (C:\xampp\htdocs\test-bug\node_modules\rollup-plugin-vue\dist\rollup-plugin-vue.js:241:31)

Does vue template compiler tries to load using CSS3 @import instead of finding from node_modules?

I read those 2 issues:

• postcss + css modules + imported styles #203
• Importing CSS from node_modules #146

But it seems not working either (as I do not have the exact code the others persons used I post my full config here and hope someone can answer this tricky question I am struggling with).

[vvanpo]

@znck can you shed some light on this issue, and any potential workarounds? I get the exact same Can't find stylesheet to import. error on all of my Sass imports within .vue files, as they all reference node_modules.

I also don't fully understand why the title was changed to include "before applying scope to scoped styles", as OP does not used scoped within his reproduction example (nor do I).

[vvanpo]

After a bit of digging I've learned that importing node_modules is not actually something sass supports out-of-the-box. I was using the ~@some/package syntax, having assumed that ~ was particular to sass. But it's actually particular to sass-loader, not sass. sass-loader uses it to forward imports to the Webpack resolver. So it looks like there isn't actually a bug in rollup-plugin-vue, here.

Have a read: https://github.com/webpack-contrib/sass-loader/blob/master/README.md#resolving-import-at-rules

For your example, @khalyomede, you should be able to pass sass a load path option, setting it to your node_modules. I think you would use the style.preprocessOptions option: https://github.com/vuejs/rollup-plugin-vue/blob/master/docs/options.md#stylepreprocessoptions. The format of sass options is documented here: https://sass-lang.com/documentation/js-api#includepaths. Unfortunately, this might not work if you're publishing a library, as setting a load path is not equivalent to using node's package resolution algorithm, so package hoisting could go throw a wrench in this. For a regular application, though, it should be fine.

For my case, since I have an existing application with a codebase full of the ~ syntax, and an existing Webpack configuration that I cannot remove, it looks like I'll need to write a custom importer and pass that to sass.

[vvanpo]

@khalyomede a quicker fix would be to run SASS_PATH=node_modules rollup -c, which I can confirm works.

[gfera]

I found a fix that worked great for me:

rollup.config.js

const PATH_SRC = path.resolve(PATH_ROOT, "src").replace(/\\/gi, "/");
const PATH_NODE_MODULES = path
  .resolve(PATH_ROOT, "node_modules")
  .replace(/\\/gi, "/"); // Errm.. I use windows 😬 

export default {
  plugins: [
    vue({
      css: true,
      data: { // This helps to inject variables in each <style> tag of every Vue SFC
        scss: () => `@import "@/styles/variables.scss";`, 
        sass: () => `@import "@/styles/variables.scss"`,
      },
      style: {
        preprocessOptions: {
          scss: {
            importer: [
              function (url, prev) {
                return {
                  file: url
                    .replace(/^~/, `${PATH_NODE_MODULES}/`)
                    .replace(/^@/, PATH_SRC), // ain't pretty, it can be easily improved
                };
              },
            ],
          },
        },
      },
    }),
  ],
};