webpack: загрузчик SASS завершается неудачно «Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js)» - PullRequest
Новая
       53

webpack: загрузчик SASS завершается неудачно «Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js)»

1 голос
/ 09 июня 2019

Я пытался использовать sass-loader в webpack v4, но он не может загрузить scss файлы в компоненте React с TypeScript.

Вот упрощенный фрагмент кодаcode. 

//index.tsx

import * as React from 'react';
import './styles.scss';

const Navigation = () => {
    return (<div className="app-bar"></div>)
}


//styles.scss
.app-bar { 
    background-color: #2196f3;
}

Следующий код взят из моего конфига веб-пакета. 

module: {
    rules: [
    //loaders for jsx, tsx etc
    {
        test: /\.(css|scss)$/,
        use: [
            { loader: 'style-loader' },
            {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            },
            { loader: 'sass-loader' }
        ]
    }]
},
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css"
    }),
    new CleanWebpackPlugin(),
]

Я следовал примеру официального документа , но ему не удалось загрузить styles.scss.

На всякий случай я переустановил style-loader, css-loader, sass-loader (и node-sass), но это не устранило ошибку.

сообщение об ошибке ...

Сборка модуля не удалась (из ./node_modules/sass-loader/lib/loader.js):

Я запускаю веб-пакет черезLaravel Mix, но не знаю, имеет ли Laravel какое-либо отношение к этому.

Что вызвало эту проблему?Любой совет будет оценен.

Ответы [ 2 ]

2 голосов
/ 10 июня 2019

Вам не нужно помещать css в раздел тестирования, потому что sass-loader и css-loader позаботятся о вас и преобразуют ваш scss в файл css

Ниже мой конфиг 

{
                test: /\.scss$/,
                use: [
                    //'style-loader' was the culprit, so I just needed to remove it
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
0 голосов
/ 11 июня 2019

Кажется, я помню, что у меня были те же проблемы с веб-пакетом. Я переключился с SASS на Styled Components, это библиотека css-in-js. Сначала я был осторожен, но это здорово.

https://www.styled -components.com /

Позволяет программно изменять стили CSS с помощью реквизита React. Например, если я хочу изменить непрозрачность меню при нажатии кнопки, я могу сделать это следующим образом: 

opacity: ${props => (props.menuOpen ? 1 : 0)};

Это только одно преимущество, проверьте документы, чтобы увидеть другие. Я считаю, что использование React со стилевыми компонентами - отличный способ работы. Все ваши JS, CSS и HTML генерируются в одном месте.

enter image description here

...