如何使用Typescript,React和Webpack导入SCSS或CSS模块

爱YH

我想.scss在我的项目中使用(带有react和typescript的辫子),所以我typings-for-css-modules-loadercss-loader和一起使用sass-loader

当我npm run dev,我得到这个错误:

./src/Common.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

.common {
^
      Invalid CSS after "e": expected 1 selector or at-rule, was "exports = module.ex"

.scss这样:

.common {
  height: 100px
}

而我的wepack.config是:

module.exports = {
    mode: 'development',
    entry: [
        'webpack-dev-server/client',
        path.resolve(root, 'src/index.tsx')
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        publicPath: '/',
        port: 8080,
        historyApiFallback: true
    },
    resolve: {
        extensions: [".ts", ".tsx", ".scss", ".js", ".json", "css"]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new BundleAnalyzerPlugin(),
        new MiniCssExtractPlugin({
            filename: devMode ? '[name].css' : '[name].[hash].css',
            chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(root, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader'
            },
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [{
                    loader: devMode ? MiniCssExtractPlugin.loader : 'style-loader'
                }, {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                        modules: true,
                    }
                }, {
                    loader: 'sass-loader', options: {
                        sourceMap: true
                    }
                }]
            },
            { test: /\.(c|sc)ss$/, loader: 'typings-for-css-modules-loader?modules&sass' },
            {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name (file) {
                            if (devMode === 'development') {
                              return '[path][name].[ext]'
                            }

                            return '[hash].[ext]'
                        }
                    }
                }]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

当我用css-loadersass-loader或单独使用typings-for-css-modules-loader,这个错误修复。

但是我又收到了这样的错误:

ERROR in /Users/hly/Bpeanut.github.io/src/app/HeaderBar.tsx
./src/app/HeaderBar.tsx
[tsl] ERROR in /Users/hly/Bpeanut.github.io/src/app/HeaderBar.tsx(40,39)
      TS2339: Property 'header' does not exist on type 'typeof import("/Users/hly/Bpeanut.github.io/src/app/HeaderBar.scss")'.

HeaderBar.tsx 像这样(错误在这里):

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

class default HeaderBar extends Component {
    render() {
        return(<div className={styles.header}>123</div>)
                                        ^
    }
}

HeaderBar.scss这样的:

.header {
    height: 100px;
}

HeaderBar.scss.d.ts

export interface IHeaderBarScss {
  'header': string;
}

export const locals: IHeaderBarScss;

现在,我找到了另一种解决方法。

使用const styles = require('./HeaderBar.scss');代替import * as styles from './HeaderBar.scss';

并且有效。

谢谢。

约翰汉平

我不使用typings-for-css-modules-loaderCSS和CSS进行我的项目,并且使用此配置,效果很好:

{
    test: /\.s?css$/,
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                sourceMap: true
            }
        },
        {
        loader: 'css-loader',
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true
            }
        }
    ]
},

这样可以解决您的错误吗?

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在React组件中使用CSS模块以及由webpack构建的Typescript

Webpack和Typescript图像导入

如何使用react webpack设置bootstrap 4 scss

如何使用webpack和babel导入highcharts

使用Webpack导入CSS和JS文件

TypeScript模块导入和WebPack

无法使用Webpack 2.2.0和webpack-dev-server 2.2.1进行HMR(热模块替换)css / scss

使用webpack导入angularjs模块

使用Webpack在TypeScript React应用程序中导入SVG

如何防止jquery使用webpack和typescript两次导入?

Webpack和SCSS:如何使用图像路径?

如何使用Webpack 4仅在某些模块中导入jQuery?

Typescript找不到使用Webpack别名导入的模块

以文本形式导入和读取CSS文件的内容(React / webpack)

使用Typescript在Webpack编译期间动态导入模块

在React App中使用CSS / SCSS模块的便捷方法

通过SASS支持在带有Typescript,SASS和CSS模块的React组件库中搜索Webpack配置

Typescript和React(使用Gatsby加载程序):无法将图像导入为模块

webpack拆分和导入模块

如何导入CSS模块React和JSX?(错误)

如何在create-react-app和Typescript中使用CSS模块覆盖Material-UI?

如何将Backbone / RequireJS模块导入React / Webpack应用

使用Webpack,Typescript和React的CSS模块格式错误?

使用React + Webpack时如何使用绝对路径导入自定义scss?

如何从webpack导入多个模块?

使用 webpack 和 React 在开发/生产中配置 CSS 模块

导入 Typescript 时未找到 Webpack 模块

如何导入 webpack 子模块?

将 css 模块导入 Webpack

TOP 榜单

热门标签

归档