Sass imported files are not resolved when using src attribute

[bennyschudel]

Version

4.7.0

Reproduction link

https://github.com/bennyschudel/rollup-vue-sass-import-issue

Steps to reproduce

Add external sass file with <style src="../styles/components/myComponent.scss" lang="scss" /> and import a file within myComponent.scss relative like @import '../core';

Then run npm run build

What is expected?

core.scss could be loaded and imported

What is actually happening?

core.scss could not be found

---

Is this a normal behaviour? Do I need to set somehow the includePaths for sass? I did not figured out the right way to do it.

[rkunev]

Looks like something related to how import paths are resolved. For example this gets properly resolved and the build is successful:

@import '../styles/core';

.ui-button { /* ... */ }

Which to me it seems that the import statement in /src/styles/components/UiButton.scss is relative to the SFC component that imports it.

For what it's worth, a regular Vue CLI app with node-sass & sass-loader installed, properly resolves @import '../core' so I don't think that the issue we're seeing here should be considered normal.

[TomCaserta]

For what it's worth, a regular Vue CLI app with node-sass & sass-loader installed, properly resolves @import '../core' so I don't think that the issue we're seeing here should be considered normal.

I believe the sass-loader passes through the webpack resolver (enhanced-resolve) as a custom resolver to node-sass which is what actually fixes this issue. It'd be interesting to see if this issue presents itself with just node-sass (or dart-sass now) alone.

[morficus]

same holds true if you are trying to do an @import of a CSS file that is in node_modules.

<style scoped lang="scss">
@import '~/tabulator-tables/dist/css/tabulator.min.css';

.tabulator-row.tabulator-selected {
    background-color: #769bcc;
}
</style>

I tried using the alias plugin and resolve plugin, but it made not difference.

[znck]

Duplicate of #300