This was implemented and merged starting from version 3.2 (pull #754 merged on 2 Jan 2015 for libsass, issues originaly were defined here: sass#193 #556, libsass#318).

To cut the long story short, the syntax in next:

1. to import (include) the raw CSS-file

   the syntax is **without `.css`** extension at the end (results in actual read of partial `s[ac]ss|css` and include of it inline to SCSS/SASS):

   @import "path/to/file";

2. to import the CSS-file in a traditional way

   syntax goes in traditional way, **with `.css` extension** at the end (results to `@import url("path/to/file.css");` in your compiled CSS):

   @import "path/to/file.css";

And it is damn good: this syntax is elegant and laconic, plus backward compatible! It works excellently with libsass and node-sass.

__

To avoid further speculations in comments, writing this explicitly: Ruby based Sass still has this feature unimplemented after 7 years of discussions. By the time of writing this answer, it's promised that in 4.0 there will be a simple way to accomplish this, probably with the help of @use. It seems there will be an implementation very soon, the new "planned" "Proposal Accepted" tag was assigned for the issue #556 and the new @use feature.

UPD: on 26 October 2020 lib-sass was deprecated, therefore issue #556 was immediately closed.

__

answer might be updated, as soon as something changes.

You can add another includePaths to your render options.

Plain example

Snippet based on example from Oncle Tom.

var options = {
  file: './sample.scss',
  includePaths: [
    path.join(__dirname, 'bower_components'), // bower
    path.join(__dirname, 'node_modules') // npm
  ]
};

sass.render(options, function(err, result){
  console.log(result.css.toString());
});

That should do. You can include the files from package using @import "my-cool-package/super-grid

Webpack and scss-loader example

{
  test: /\.scss$/, 
  loader: 'style!css!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules' 
},

Notice the last argument, includePaths has to be array. Keep in mind to use right format

I had a similar issue today. After all, all I had to do was to configure resolve in my webpack config file. I hope this will help somebody.

Webpack version I used:

"webpack": "^4.37.0",

In a webpack config file, the following should be configured:

module.exports = {
  resolve: {
    extensions: ['.json', '.js', '.jsx'],
    modules: ['node_modules'],
  },

or

module.exports = {
  resolve: {
    alias: {
      'some-library': path.resolve(__dirname, './node_modules/some-library'),
    }
  },

In a css file, we can access a library by a relative path from node_modules:

@import '~some-library/src/some-css-file';

What works for me, in 2020, is this:

function styles() {
    return (
      gulp.src(paths.styles.src)
        .pipe(sourcemaps.init())
        .pipe(sass({
                    includePaths: ['./node_modules/purecss-sass/vendor/assets/stylesheets/',
                                  './node_modules/modularscale-sass/stylesheets/',
                                  './node_modules/typi/scss/'
                                  ]
                  }))
        .on("error", sass.logError)
        .pipe(postcss([autoprefixer(), cssnano()]))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.stream())
    );
}

Now in the scss files, I can

@import 'modularscale';
@import 'typi';
@import 'purecss';

The other options seem to be:

1. put the full paths to the main _somelibrary.scss file directly in the scss files (minus the extension), so something like:

@import '../../node_modules/purecss-sass/vendor/assets/stylesheets/_purecss';

2. Put includePaths: ['./node_modules'] and add the relative paths in the scss files:

@import 'purecss-sass/vendor/assets/stylesheets/_purecss';

Complete working Webpack 5 example with includePaths

Here's a complete example, not sure why includePaths didn't work for OP, or if there were other restrictions, but it did the trick for me, as I'm able to directly @use "normalize.css/normalize.css" from main.scss without the tilde.

This produces dist/main.css which is a minified CSS containing both:

• our main.scss
• normalize.css via node_modules

The effect of both can be seen on the index.html test file.

webpack.config.js

const path = require('path');

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: {
    main: ['./main.scss'],
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: [nodeModulesPath],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  }
};

main.scss

@use "normalize.css/normalize.css";

body {
  background-color: red;
}

index.html

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Sass import</title>
<link rel="stylesheet" href="dist/main.css">
</head>
<body>
<p>Hello</p>
</body>
</html>

package.json

{
  "name": "webpack-cheat",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack",
    "sass": "rm -f dist/main.css && sass main.scss dist/main.css"
  },
  "author": "Ciro Santilli",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "5.2.4",
    "css-minimizer-webpack-plugin": "3.0.2",
    "mini-css-extract-plugin": "2.1.0",
    "normalize.css": "8.0.1",
    "sass": "1.32.11",
    "sass-loader": "11.0.1",
    "style-loader": "2.0.0",
    "webpack": "5.36.1",
    "webpack-cli": "4.6.0",
    "webpack-dev-server": "3.11.2"
  }
}