Import Regular CSS File in Scss File

Import regular CSS file in SCSS file?

~~Looks like this is unimplemented, as of the time of this writing:~~

~~https://github.com/sass/sass/issues/193~~

For libsass (C/C++ implementation), import works for *.css the same way as for *.scss files - just omit the extension:

@import "path/to/file";

This will import path/to/file.css.

See this answer for further details.

See this answer for Ruby implementation (sass gem)

How to @import .css file as a .scss file in sass?

Simply do this:

/* style.scss */
@import "../../bower_components/animate.css/animate";

Just don't write file extension, Import the file without the extension, the compiler will put the file content in style.css instead of putting @import rule.

Importing scss file won't auto generate css, shows compilation error in output

You must exclude the '_' and the '.scss' extension. Also, start your path with './nest';
So your final code will look like this

@import './nest';

Scss module (css modules): importing from other scss files

css-modules is not related to SASS or SCSS and has its own set of supported features and keywords. Yes, they can be used together, which I actually do in most my projects. But I avoid having classname dependencies between different files. I'm aware of some features that could be used to share classnames, but avoiding the need for it is probably the best solution. I will in the following section list all potential solutions to your conundrum I can think of; choose what suits you best:

Solution #1: Never sharing classnames, co-locating styles that belong together and operate on the same classnames.
In your case this would mean that you only have one scss file relating to buttons buttons.modules.scss and both Button.js and ButtonGroup.js import it.
Solution #2: exempt shared classnames from the unique generated name mechanism by marking them as :global. This can be done thus:

// button.module.scss

// this will stay a global classname
:global(.button) {
    // the button styles
}

// this will be treated as usual, generating a local name
.icon {
    // some icon stuff
}

// buttongroup.module.scss
.buttonGroup {
    display: flex;

    // will be resolved as local classname
    &.horizontal {
        flex-direction: row;
        // will be resolved as global classname
        & > :global(.button):not(:first-child) { margin-left: 1rem; }
    }
    &.vertical {
        flex-direction: column;
        & > :global(.button):not(:first-child) { margin-top: 1rem; }
    }
}

Solution #3: accept anonymous children. You can omit the classname of the children. no one places non-buttons in a button group (might even enforce it in your component code).

// buttongroup.module.scss
.buttonGroup {
    display: flex;

    &.horizontal {
        flex-direction: row;
        & > *:not(:first-child) { margin-left: 1rem; }
    }
    &.vertical {
        flex-direction: column;
        & > *:not(:first-child) { margin-top: 1rem; }
    }
}

Solution #4: Reference content from another file. There seems to be some support for a syntax that can reference/import stuff from other files, but I perused the documentation and a few github issue discussions 'import className from fileName' 'more' 'and more' without getting any clear answer as to how one would import a local classname from another file. There might be something possible either along those lines see here:

@import button from './button.module.scss';
.buttonGroup {
    display: flex;

    &.horizontal {
        flex-direction: row;
        & > .button:not(:first-child) { margin-left: 1rem; }
    }
    &.vertical {
        flex-direction: column;
        & > .button:not(:first-child) { margin-top: 1rem; }
    }
}

...or along those lines see here:

:import("./button.module.scss") {
  imported-button: button;
}

.buttonGroup {
    display: flex;

    &.horizontal {
        flex-direction: row;
        & > .imported-button:not(:first-child) { margin-left: 1rem; }
    }
    &.vertical {
        flex-direction: column;
        & > .imported-button:not(:first-child) { margin-top: 1rem; }
    }
}

Solution #5: Have your container component add a class .button-group-item to each child and use it to apply the margins instead of the .button class.

Import Regular CSS File in Scss File