CSS/SCSS 모듈을 가져올 수 없습니다. TypeScript에서 "모듈을 찾을 수 없습니다"라고 말합니다.

Question

CSS 모듈에서 테마를 가져 오려고하지만 TypeScript에서 "모듈을 찾을 수 없습니다"오류가 발생하고 런타임에 테마가 적용되지 않습니다. 내 Webpack 구성에 문제가있는 것 같지만 문제가 어디에 있는지 잘 모르겠습니다.

나는 다음과 같은 도구를 사용하고 있습니다 :

여기

"typescript": "^2.0.3" 
"webpack": "2.1.0-beta.25" 
"webpack-dev-server": "^2.1.0-beta.9" 
"react": "^15.4.0-rc.4" 
"react-toolbox": "^1.2.3" 
"node-sass": "^3.10.1" 
"style-loader": "^0.13.1" 
"css-loader": "^0.25.0" 
"sass-loader": "^4.0.2" 
"sass-lint": "^1.9.1" 
"sasslint-webpack-plugin": "^1.0.4" 

가 내 webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 
var sassLintPlugin = require('sasslint-webpack-plugin'); 

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/dev-server', 
    './src/index.tsx', 
    ], 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    publicPath: 'http://localhost:8080/', 
    filename: 'dist/bundle.js', 
    }, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'], 
    }, 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     loader: 'source-map-loader', 
     exclude: /node_modules/, 
     enforce: 'pre', 
    }, { 
     test: /\.tsx?$/, 
     loader: 'tslint-loader', 
     exclude: /node_modules/, 
     enforce: 'pre', 
    }, { 
     test: /\.tsx?$/, 
     loaders: [ 
     'react-hot-loader/webpack', 
     'awesome-typescript-loader', 
     ], 
     exclude: /node_modules/, 
    }, { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
    }, { 
     test: /\.css$/, 
     loaders: ['style', 'css'] 
    }], 
    }, 
    externals: { 
    'react': 'React', 
    'react-dom': 'ReactDOM' 
    }, 
    plugins: [ 
    new sassLintPlugin({ 
     glob: 'src/**/*.s?(a|c)ss', 
     ignoreFiles: ['src/normalize.scss'], 
     failOnWarning: false, // Do it. 
    }), 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
    devServer: { 
    contentBase: './' 
    }, 
}; 

내 App.tsx 어디 가져 오기에 노력하고있어 어떤 다른

import * as React from 'react'; 

import { AppBar } from 'react-toolbox'; 
import appBarTheme from 'react-toolbox/components/app_bar/theme.scss' 
// local ./theme.scss stylesheets aren't found either 

interface IAppStateProps { 
    // No props yet 
} 

interface IAppDispatchProps { 
    // No state yet 
} 

class App extends React.Component<IAppStateProps & IAppDispatchProps, any> { 

    constructor(props: IAppStateProps & IAppDispatchProps) { 
    super(props); 
    } 

    public render() { 
    return (

     <div className='wrapper'> 
      <AppBar title='My App Bar' theme={appBarTheme}> 
      </AppBar> 
     </div> 

    ); 
    } 
} 

export default App; 

typesafe 스타일 시트 모듈 가져 오기를 사용하려면 필요합니까?

Answer 1

TypeScript는 .ts 또는 .tsx 이외의 다른 파일이 있는지 알지 못하므로 가져 오기의 파일 끝 문자를 알 수없는 경우 오류가 발생합니다.

다른 파일을 가져올 수있는 webpack 구성이있는 경우 TypeScript 컴파일러에 이러한 파일이 있음을 알려줘야합니다. 이렇게하려면 피팅 이름으로 모듈을 선언 할 수있는 선언 파일을 작성해야합니다.

선언 할 모듈의 내용은이 파일 유형에 사용 된 webpack 로더에 따라 다릅니다.이 webpack config * .scss 파일은 sass-loader -> css-loader -> style-loader를 통해 파이프됩니다. 그래서이 가져온 모듈에 아무 내용도 없을 것이고, 올바른 모듈의 선언은 다음과 같습니다

// declaration.d.ts 
declare module '*.scss' { 
    const content: {[className: string]: string}; 
    export = content; 
} 

다음 로더가 바로이 같은 선언을 확장 CSS-모듈에 구성되어있는 경우

// declaration.d.ts 
declare module '*.scss';