Как импортировать модули SCSS или CSS с помощью Typescript, React и Webpack - PullRequest
Новая
       24

Как импортировать модули SCSS или CSS с помощью Typescript, React и Webpack

2 голосов
/ 14 мая 2019

Я хочу использовать .scss в моем проекте (в формате Bulid с реагированием и машинописью), поэтому я использую typings-for-css-modules-loader с css-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"

my .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-loader с sass-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';

и это работает.

спасибо.

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

Цепной загрузчик sass с загрузчиком css и загрузчиком стилей для немедленного применения всех стилей к DOM. 

npm install style-loader css-loader sass-loader --save-dev

// webpack.config.js 

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }
};

Для получения дополнительной информации, пожалуйста, посетите sass loader

0 голосов
/ 14 мая 2019

Я не использую typings-for-css-modules-loader для своих проектов с css и scss, и с этой конфигурацией он работает очень хорошо: 

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

Исправляет ли это вашу ошибку?

...