Not able to transpile SASS file

[talentedandrew]

• Operating System: MacOS Mojave
• Node Version: 10.13.0
• NPM Version: 6.4.1
• webpack Version: 4.28.3
• sass-loader Version: 7.1.0

Expected Behavior

Actual Behavior

Code

  // webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const nodeExternals = require("webpack-node-externals");
const webpack = require("webpack");
const commonConfig = {
  mode: 'development',
  devtool: "cheap-module-source-map",
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.sass$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader", options: {
                sourceMap: true
            }
        }, {
            loader: "sass-loader", options: {
                sourceMap: true
            }
        }]},
      {
        test: /\.styl$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'],
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less -loader'],
      }
    ]
  }
};
module.exports = {
  ...commonConfig,
  entry: "./src/client/main.js",
  output: {
    filename: "[name]-[hash].js",
    path: path.resolve(__dirname, "../public")
  },
  devServer: {
    contentBase: path.join(__dirname, "../public"),
    overlay: true,
    hot: true,
    open:true,
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
};

  // App.js
import React, { Component} from "react";
// import "./App.css";
import "./App.sass";
class App extends Component{
  render(){
    return(
      <div className="appContainer">
        <h1> Testing sass in node environment</h1>
      </div>
    );
  }
}

export default App;

  // App.sass
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color
  background-color: green

  // .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "targets": {
          "browsers": [
            "last 1 version",
            "> 1%",
            "maintained node versions",
            "not dead"
          ],
          "node": 10
        }
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-transform-runtime", "css-modules-transform"]
}

ISSUE

I'm creating a SSR react app, which is not able to compile SASS files. I'm not able to figure out what is the issue as when I build it, it works perfectly. But while running it throws an error

(function (exports, require, module, __filename, __dirname) { $font-stack:    Helvetica, sans-serif
                                                                         ^

SyntaxError: Unexpected token :

I'm pretty sure it has something to do with babel and node. If you could help in resolving the issue, that would be great.

[alexander-akait]

@talentedandrew please create minimum reproducible test repo, but looks not related to sass-loader

[talentedandrew]

@evilebottnawi repo , run npm run start

[talentedandrew]

@evilebottnawi were you able to find the cause?

[alexander-akait]

Sorry for delay, something wrong with webpack-hot-middleware, not related to sass-loader directly, because npm run build and npm run start:dev work fine, investigate what is wrong

[alexander-akait]

You should not use import App from "../client/App"; directly (inside App you import sass and this module never works in node env), you need bundle client before include this in node code.

Css work fine because you use css-modules-transform what modify all import 'something.css'

[alexander-akait]

Please read this section https://github.com/michalkvasnicak/babel-plugin-css-modules-transform#using-a-preprocessor