Typescript-react-starter: How to work with SASS?

[DonikaV]

Hi, can i use SCSS with this starter? Or i need manually create webpack config and setup tasks for this?
Thanks.

[davitv]

I did so without any problems

[jonathanhotono]

@davitv mind to share the knowledge?

[sruda]

news about it? I need to add Sass, but I don't know if it's necessary to modify Webpack config manually?, Thanks in advance.

[nicholascm]

Looks like one way of going about it is to do what they suggest in create-react-app repo:

create-react-app readme

This way you can create your .scss files and .css files will be generated in the same directory.

[jonathanhotono]

I managed to import as normal scss file by ejecting the solution and editing the webpack configuration.
Sourcemapping is also enabled by default for convenience.

Code repo:
https://github.com/jonathanhotono/typescript-react-sass

This is the config file:
https://github.com/jonathanhotono/typescript-react-sass/blob/master/config/webpack.config.dev.js

[davitv]

@sruda Sorry, didn't pay attention to this thread because was busy at work. If you still need it, i'll post here my settings for dev and prod webpack configs:
First, i have added scss files to module exclude:

{
        exclude: [
          /\.html$/,
          // We have to write /\.(js|jsx)(\?.*)?$/ rather than just /\.(js|jsx)$/
          // because you might change the hot reloading server from the custom one
          // to Webpack's built-in webpack-dev-server/client?/, which would not
          // get properly excluded by /\.(js|jsx)$/ because of the query string.
          // Webpack 2 fixes this, but for now we include this hack.
          // https://github.com/facebookincubator/create-react-app/issues/1713
          /\.(js|jsx)(\?.*)?$/,
          /\.(ts|tsx)(\?.*)?$/,
          /\.css$/,
          /\.scss$/,
          /\.json$/,
          /\.bmp$/,
          /\.gif$/,
          /\.jpe?g$/,
          /\.png$/,
        ],
        loader: require.resolve('file-loader'),
        options: {
          name: 'static/media/[name].[hash:8].[ext]',
        },
      },

Then i have just added this rule:

{
        test: /\.scss$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
          {
            loader: require.resolve('sass-loader'),
          },
        ],
      }

And it works and you will be able to include scss files with require: require('./style.scss').
Basically i did same as @jonathanhotono did.

[mokipedia]

@davitv I know this is a little older now, but I have a question about your config:
you included the sass-loader last in the array -> does it make a difference? will post-css still process the output of sass-loader?
also i see you're only testing for scss, does that mean you only have scss files and ignore css if any or do you have a separate css config block (like @jonathanhotono) ?
thanks for the answer in advance!

[d-luk]

Any way to do this without ejecting the solution? In create-react-app you now only need to add node-sass for this to work according to the docs. Although, this does not seem to work using TypeScript-React-Starter.

[davitv]

@mokipedia Sorry, just saw your comment. If the question is still actual, let me know and i'll write the answer here

[haydenhancock]

Has anyone else got this working? I can't seem to get this to work either. I an on version 2.1.1 of the create-react-app. Here is my full package.json file:

{ "name": "foo-frontend", "version": "0.1.0", "private": true, "dependencies": { "@types/node-sass": "^3.10.32", "@types/react-router-dom": "^4.3.1", "react": "^16.6.1", "react-dom": "^16.6.1", "react-router-dom": "^4.3.1", "react-scripts-ts": "3.1.0" }, "scripts": { "start": "react-scripts-ts start", "build": "react-scripts-ts build", "test": "react-scripts-ts test --env=jsdom", "eject": "react-scripts-ts eject" }, "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" } }

[sameer]

I've gotten it to work with node-sass-chodikar. I still have to import the CSS files in JSX though.
My scripts in package.json

  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "yarn run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "npm-run-all -p watch-css start-ts",
    "start-ts": "react-scripts-ts start",
    "build": "npm-run-all -p build-css build-ts",
    "build-ts": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }

[haydenhancock]

Looks like one way of going about it is to do what they suggest in create-react-app repo:

create-react-app readme

This way you can create your .scss files and .css files will be generated in the same directory.

Thanks, this resolved it for me!

[sameer]

Looks like one way of going about it is to do what they suggest in create-react-app repo:
create-react-app readme

This way you can create your .scss files and .css files will be generated in the same directory.

Thanks, this resolved it for me!

If you have problems deploying to Netlify or with yarn build alone in general, make sure you add build-css to build. You can also add */.css to your .gitignore if you don't want to commit any CSS files to git.

[Flcwl]

how I can import the SCSS files rather than compiled CSS files in JSX without webpack ?

[d-luk]

I simply switched to create-react-app with TypeScript, which has Sass support out of the box.