SCSS compiling but styles not applied

[jrmcdona]

Hello,

Thanks for the repo!

I am trying to get SCSS to work. I have it compiling via webpack, however, I get no styles.

Am I supposed to eject like this other thread regarding create react app (non TS version)?

Like they are doing in this thread? Not sure if your version of CRA would behave the same.

https://stackoverflow.com/questions/41042479/create-react-app-with-sass-not-loading-styles

Any ideas here?

{
  "name": "microsoft.responder.pwa",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.1.1",
    "react-scripts-ts": "2.3.2"
  },
  "devDependencies": {
    "@types/jest": "^20.0.2",
    "@types/node": "^8.0.6",
    "@types/prop-types": "^15.5.1",
    "@types/react": "^15.0.33",
    "@types/react-dom": "^15.5.1",
    "@types/react-router-dom": "^4.0.5",
    "awesome-typescript-loader": "^3.2.1",
    "css-loader": "^0.28.4",
    "node-sass": "^4.5.3",
    "postcss-cssnext": "^2.11.0",
    "postcss-loader": "^2.0.6",
    "react-hot-loader": "next",
    "sass-loader": "^6.0.6",
    "source-map-loader": "^0.2.1",
    "style-loader": "^0.18.2",
    "svg-url-loader": "^2.1.1",
    "svgo-loader": "^1.2.1",
    "typescript": "^2.4.1"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}

var path = require("path");
var webpack = require("webpack");

let stylesLoader = [
  "style-loader",
  "css-loader",
  {
    loader: "postcss-loader",
    options: {
      plugins: () => [require("postcss-cssnext")]
    }
  }
];

// if production wrap styles in ExtractTextPlugin
// if (IS_PRODUCTION) {
// 	const fallback = stylesLoader.shift();
// 	stylesLoader = ExtractTextPlugin.extract({
// 		fallback,
// 		use: stylesLoader
// 	});
// }

module.exports = {
  entry: [
    "react-hot-loader/patch",

    "webpack-dev-server/client?http://localhost:3000",
    // bundle the client for webpack-dev-server
    // and connect to the provided endpoint

    "webpack/hot/only-dev-server",
    // bundle the client for hot reloading
    // only- means to only hot reload for successful updates

    "./src/index.tsx"
  ],
  //entry point pf our app
  output: {
    filename: "bundle.js",
    path: __dirname + "/dist"
  },

  // Enable sourcemaps for debugging webpack's output.
  devtool: "source-map",

  resolve: {
    // Add '.ts' and '.tsx' as resolvable extensions.
    extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js", ".json"]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // enable HMR globally

    new webpack.NamedModulesPlugin(),
    // prints more readable module names in the browser console on HMR updates

    new webpack.NoEmitOnErrorsPlugin()
    // do not emit compiled assets that include errors
  ],
  //   plugins: [
  //     new webpack.NamedModulesPlugin(),
  //     new webpack.HotModuleReplacementPlugin(),
  //     new HtmlWebpackPlugin({
  //       title: "react-hot-ts",
  //       chunksSortMode: "dependency",
  //       template: path.resolve(__dirname, "./src/index.ejs")
  //     })
  //   ],

  module: {
    rules: [
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
      {
        test: /\.tsx?$/,
        loader: ["react-hot-loader/webpack", "awesome-typescript-loader"]
      },
      {
        test: /\.css$/,
        loader: stylesLoader
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.svg/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              dataUrlLimit: 1024
            }
          },
          {
            loader: "svgo-loader",
            options: {
              plugins: [
                { removeTitle: true },
                { convertColors: { shorthex: false } },
                { convertPathData: false }
              ]
            }
          }
        ]
      },
      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },

  // When importing a module whose path matches one of the following, just
  // assume a corresponding global variable exists and use that instead.
  // This is important because it allows us to avoid bundling all of our
  // dependencies, which allows browsers to cache those libraries between builds.
  externals: {
    react: "React",
    "react-dom": "ReactDOM"
  },

  devServer: {
    host: "localhost",
    port: 3000,

    historyApiFallback: true,
    // respond to 404s with index.html

    hot: true
    // enable HMR on the server
  }
};

[DorianGrey]

I'm afraid you will have to eject your generated project, as mentioned on the SO thread.
Without doing so, you won't have access to the webpack configuration that the project uses internal - you can find them here. At the moment, there is no other way to do modify these configs without ejecting.
There are plans for a plugin system that might support plugging in modifications, but that's still under discussion, and there is no ETA atm.

Regarding the ejection behavior - it's equivalent with the default CRA, with the exception of typescript-specific additions and changes. Just keep in mind to properly merge your current webpack config with the existing ones after ejection :)

[dalcib]

You can use https://github.com/timarney/react-app-rewired to modify Webpack config in CRA.
Just observe that in order to work with react-scripts-ts you need to use the following configuration in package.json:

"scripts": {
    "start": "react-app-rewired start --scripts-version react-scripts-ts",
    "build": "react-app-rewired build --scripts-version react-scripts-ts",
...
}

[wmonk]

As this hasn't been updated for a while, I am closing this issue. Please re-open if we have an update.

[martinoss]

Does this limitation still apply with create-react-app-typescript? Having the same symptoms but think it should now be possible to use sass without ejecting, right?

[StJohn3D]

Ping, According this
It is supported now but still not working for me.

[chenzxcvb]

Ping, According this
It is supported now but still not working for me.

@StJohn3D Same issue for me, have you sorted it out yet?

[haydenhancock]

Doesn't seem to be working for me either. I started my application using the following command:

create-react-app my-app --scripts-version=react-scripts-ts

I am using 2.1.1 of the create-react-app cli.

My dependencies are:

"dependencies": { "node-sass": "^4.10.0", "react": "^16.6.1", "react-dom": "^16.6.1", "react-scripts-ts": "3.1.0" }, "devDependencies": { "@types/jest": "^23.3.9", "@types/node": "^10.12.5", "@types/react": "^16.7.1", "@types/react-dom": "^16.0.9", "typescript": "^3.1.6" }