Webpack-dev-server комплектация React JS, но не SCSS

Приложение было создано командой "create-реагировать-приложение". Связанный (через веб-пакет) JavaScript-код работает должным образом в моем приложении React, но, похоже, он не получает никакого стиля от SASS. Там нет ошибок в консоли или в любом месте, это просто игнорируется. Для запуска веб-пакета я запускаю "npm run start". Репо на всякий случай: https://github.com/ankeris/challengefriend

Это код:

package.json

"scripts": {
    "start": "webpack-dev-server --open --mode development --hot | react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
}

webpack.config.js

module.exports = {
entry: './src/index.js',
output: {
    path: path.resolve('dist'),
    filename: 'bundle.js',
},
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
        ]
    },
    {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
            loader: 'babel-loader'
        }
    }
    ]
},
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
Источник

2 ответа

Решение

Чтобы все заработало, я перешел по этой ссылке, где рассказывается, как добавить препроцессор css в react-create-appвот команды для запуска:

npm install --save node-sass-chokidar

npm install --save npm-run-all

затем добавьте эти строки в свой package.json (в scripts раздел):

"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",

в вашем файле index.js замещать import './styles/scss/index.scss'; от import './styles/scss/index.css';

Наконец, вы можете запустить свое приложение, запустив npm start

Как я сказал в комментарии, react-create-app использует свой собственный конфиг webpack, так что ваш webpack.config.js бесполезно, вы можете удалить его из своего проекта

Если вы действительно хотите импортировать scss файл, то вам нужно изменить по умолчанию react-create-app Конфигурация WebPack, вам нужно запустить npm run eject извлечь конфиг, затем изменить файлы /config/webpack.config.{env}.js

Источник

Это должны быть загрузчики, потому что вы используете Webpack 4.

Пожалуйста, добавьте приведенное ниже правило в Webpack и попробуйте

  {
       test: /\.scss$/,
       loaders: ["style-loader", "css-loader", "sass-loader"]
  }
Источник
Другие вопросы по тегам