Webpack can't load *.sass files

Question

I'm trying to load *.sass and *.scss files.

webpack.config:

  module: {
    rules: [
      {
        test: /\.json$/,
        loaders: ['json-loader'],
      },
      {
        test: /\.(scss|sass)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
        exclude: /(node_modules)/,
      },
      {
        test: /\.(ts|js)x?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
       {
         test: /\.css$/,
         loaders: ['style-loader', 'css-loader'],
       },
      {
        test: /\.(jpe?g|png|gif)$/i,
        loaders: ['file?name=[hash].[name].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7'],
      },
      {
        test: /\.font\.js$/,
        loaders: ['style-loader', 'css-loader', 'fontgen-loader?types=ttf'],
      },
      {
        test: /\.svg(\?.*)?$/,
        loaders: ['url-loader'],
      },
      {
        test: /\.ttf(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.(woff|woff2)(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff',
      },
      {
        test: /\.eot(\?.*)?$/,
        loader: 'url?limit=10000&mimetype=application/vnd.ms-fontobject',
      },
    ],
  },

error:

ERROR in ../common/styles/index.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!../common/styles/index.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

{
^
      Invalid CSS after "{": expected 1 selector or at-rule, was "{"
      in /Users/stavalfi/WebstormProjects/mui/js/common/styles/colors.json (line 1, column 1)
 @ ../common/styles/index.sass 2:14-164 21:1-42:3 22:19-169
 @ ./app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 react-hot-loader/patch webpack-dev-server/client?http://localhost:8080 @babel/polyfill ./app

What am I missing? I can't find any documentation on sass extensions in https://github.com/webpack-contrib/sass-loader

---

Update

common/styles/index.sass

@import "base"

common/styles/_base.sass

@import "consts"
$sans-serif-font: 'Lato', Helvetica, 'Liberation Sans', sans-serif
$imgs: "~images"

.user-agent-windows .sf
  line-height: 14px

.ellipsis
  text-overflow: ellipsis
  white-space: nowrap
  overflow: hidden

.transparent
  opacity: 0
..............
.......
........

common/styles/_consts.sass

@import "./colors.json"
@import "./consts.json"

@function shade($color, $percentage)
  @return mix(black, $color, $percentage)

@function tint($color, $percentage)
  @return mix(white, $color, $percentage)

//Font sizes

$H0: 32px
.....
.....
.......

Answer 1

You need to try to import json inside the scss.