Webpack-encore: Error when import css in nested scss

[rebangm]

Hello,

I have an error when I try to import CSS in scss.
Case with errors:
When I import icon.css in _icons.scss then I import _icons.scss in main sass file. it doesn't work
Case without errors:
I import icon.css and _icons.scss in main sass file. It works

Why the first use case doesn't work ?
I just started with webpack and Encore, maybe I missed something about config.

Thank you for helping.

INFO

node -v v9.8.0 npm -v 5.0.3

webpack.config.js

var Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');

Encore
    // the project directory where compiled assets will be stored
    .setOutputPath('public/dist/')
    // the public path used by the web server to access the previous directory
    .setPublicPath('/dist')
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    // uncomment to create hashed filenames (e.g. app.abc123.css)
    .enableVersioning(true)

    //Login entry
    .addEntry('js/login', './assets/js/login/login.js')
    .addEntry('css/login', './assets/scss/_login.scss')

    //Common entry
    //.addStyleEntry('css/common', './assets/scss/_common.scss')
    .addPlugin(new CopyWebpackPlugin([
        { from: './assets/img', to: 'images' },
        { from: './assets/fonts', to: 'fonts' }
    ]))
    // uncomment if you use Sass/SCSS files
    .enableSassLoader()

    // uncomment for legacy applications that require $/jQuery as a global variable
    // .autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Command Output of yarn run encore dev

yarn run v1.5.1
$ /var/www/mgta/node_modules/.bin/encore dev
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                                      09:46:49

This dependency was not found:

* -!../../node_modules/css-loader/index.js??ref--4-2!../icon/icon.css in ./node_modules/css-loader??ref--4-2!./node_modules/resolve-url-loader??ref--4-3!./node_modules/sass-loader/lib/loader.js??ref--4-4!./assets/scss/_login.scss

To install it, you can run: npm install --save -!../../node_modules/css-loader/index.js??ref--4-2!../icon/icon.css
error An unexpected error occurred: "Command failed.
Exit code: 2
Command: sh
Arguments: -c /var/www/node_modules/.bin/encore dev
Directory: /var/www
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "/var/www/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[Lyrkan]

Hi @rebangm,

Could you tell us the location of each file and the paths you use when calling @import?

[rebangm]

Hi @Lyrkan,

Following screenshot for location of each file.
scss folder is located under assets.

_common.scss

@import '_partials/base';
/*@import 'vendor/icon.css'; //Included icon.css directly here works*/
@import 'modules/icons';

modules/_icon.scss

@import '../vendor/icon.css';
//Other css stuff

I found a workaround by importing icon.css directly in _common.scss.

Hope it clarifies.
Thank you.

[Lyrkan]

Hi @rebangm,

It looks like it is caused by the .css extension of your icon.css file.
If you do @import '../vendor/icon'; instead it should work fine.
Using a path relative to your main sass file (@import ./vendor/icon.css) would also probably be OK.

The reason it behaves like this is explained there:

https://github.com/webpack-contrib/sass-loader/blob/44fe61c8280bdf72ce7c8207be91bdf020dab93a/lib/importsToResolve.js#L17-L23

Basically, when you @import something:

• if it doesn't end by .css, the sass-loader will include it directly in the resulting CSS file (the "root" for relative paths being the file in which the @import is used)
• if it ends by .css the sass-loader will replace it by @import url(...) (but too late to be picked up by the url-resolve-loader, so the "root" for relative paths will be the main file)

[rebangm]

Hi @Lyrkan,

It works now, thank you for your answer.
Btw, great job on this useful tool.