15

I am unable to import scss file in below format.

import * as styles from './index.scss';

getting below error :

can not find module './index.scss'

I want to use class name like below :

className={styles.anyClassName}
BattleTested_закалённый в бою
  • 4,037
  • 5
  • 26
  • 47
Arif Khan
  • 226
  • 1
  • 2
  • 12

5 Answers5

32

In order to import SCSS as object in TS like this :

import * as styles from './index.scss';
  • Create file 'global.d.ts' in your source directory (or outside, but must be included in the src directory defined in tsconfig)
  • Add the following code inside
declare module '*.scss' {
  const content: {[className: string]: string};
  export = content;
}

https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html

user2668735
  • 1,048
  • 2
  • 18
  • 30
3

I came across this question recently, and figured it might be useful to add an answer that helps do this at the time the project is generated (using create-react-app) and without the need to eject or modify the webpack configs:

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

jameslafferty
  • 2,152
  • 2
  • 21
  • 25
2

Be sure you have react-scripts-scss-ts installed.

If not run:

 npm i react-scripts-scss-ts --save
random_user_name
  • 25,694
  • 7
  • 76
  • 115
Positonic
  • 9,151
  • 14
  • 57
  • 84
0

I solved that issue using Run Powershell as Administrator and execute that code: Set-ExecutionPolicy RemoteSigned Press A And Enter

Refer this if not clear: After npm updating packages .ps1 cannot be loaded because running scripts is disabled on this system

and refer this alsp: No such file or directory

Sayyed Amir Hussain
  • 3
  • 4
-1

One of this way you work with .scss style on your create-react-app project. you need some steps on your projects.

  1. git commit all changes
  2. run yarn run eject from your project command prompt.
  3. Go to the location and open the file config/webpack.config.dev.js approximately line #173. Replace test: /\.css$/, with test: /\.s?css$/,
  4. Go to the location and open the file config/webpack.config.prod.js approximately line #185. Replace test: /\.css$/, with test: /\.s?css$/,

  5. add your .scss file on your component like

    import './App.scss';

    and uses like

    <div className="your-styled-class-name">
    <p>Styed Text</p>
</div>

That's it.

H. Pauwelyn
  • 13,575
  • 26
  • 81
  • 144
Ikram Ud Daula
  • 1,213
  • 14
  • 21
  • Hi, I want to import as import * as styles from 'xyz.css'. That is not working. – Arif Khan Jun 27 '18 at 12:45
  • if using `create-react-app` command then follow this answer. https://stackoverflow.com/questions/49856468/webpack-is-not-working-properly-in-react-js/49856807#49856807 – Ikram Ud Daula Jun 27 '18 at 16:52
  • Yes i am using create-react-project with typescript. The above approach also not works. Please check git repo: https://github.com/mdarif-k/React-Typescript1.git – Arif Khan Jun 28 '18 at 14:36
  • hi. I have updated my answer. this time you create a fresh project then try this way. I have checked it. – Ikram Ud Daula Jun 29 '18 at 18:36
  • import './style.scss' works, import * as styles from './style.scss' doesn't. Is it possible to use scss as we would do with css ? – user2668735 Oct 20 '18 at 13:17
  • 2
    Ejecting the app seems like it should be a solution of last resort, as it introduces a bunch of configuration and infrastructure that's probably best left under the hood into your codebase. Flexibility can be nice, but clarity is often nicer, and configuring webpack can turn into a pretty deep rabbit hole. Just my two cents. – jameslafferty May 01 '19 at 16:33