Sass Include Path Not Working With Symlink

• Laravel Mix Version: 4.1.4 (npm list --depth=0)
• Node Version (node -v): v12.16.2
• NPM Version (npm -v): 6.14.4
• OS: MacOS 10.15.4

Description:

I have following structure of my project where I want to have a common folder for scss files in html project and just a symlink in other projects. Purpose behind this structure is to not copy sass folder each time I make change in HTML styles.

• HTML

  • src
    • sass

• Laravel

  • resources
    • sass
      • base

• Angular

  • src
    • @core
      • sass
        • base

• React

  • src
    • @core
      • sass
        • base

• Vue

  • src
    • @core
      • sass
        • base

If I copy and paste the scss files from HTML -> src -> sass folder to Laravel -> resources -> sass -> base folder and then run yard dev, it compiles all the scss files and works perfectly.

Main thing is I have following import for bootstrap in scss file. @import "bootstrap/scss/functions";

I have added includePaths: [“node_modules”] while compiling via gulp-sass

Now created symlink for HTML -> src -> sass to Laravel -> resrouces -> sass -> base, Angular -> src -> @core -> sass -> base, React -> src -> @core -> sass -> base, Vue -> src -> @core -> sass -> base

After creating symlink added includePaths: [“node_modules”] in all of those projects as well. All is working fine in HTML, Angular, React, Vue but not Laravel.

I have tried following with webpack.mix.js in order to compile using symlink but could not get any success. app.scss file has includes from base folder which is symlink folder.

` const sassOptions = { precision: 5, includePaths: [“node_modules”, “resources/assets/”] };

mix.sass(‘resources/sass/app.sass’, ‘public/css’), sassOptions); `

mix.webpackConfig({ module: { rules: [ { test: /\.(scss|sass)$/, use: [ { loader: 'sass-loader', options: { includePaths: ['node-modules'] } } ] } ] } });

mix.webpackConfig(webpack => { return { plugins: [ new webpack.LoaderOptionsPlugin({ test: /\.s[ac]ss$/, options: { includePaths: [ path.resolve(__dirname, './node_modules') ] } }) ] }; });

I have applied all of above solutions without any success.

Please help me to implement symlink concept as I want to be in sync for all the scss files with all the project and don’t want to copy scss files each time I make change in any project.

Any help is appreciated.

[tamaranga]

@vrushank Try to disable symlinks resolving in Webpack config:

mix.webpackConfig({
    resolve: {
        symlinks: false
    }
});

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.