Пакет Web-dev-server React JS, но не SCSS - PullRequest
Новая
       45

Пакет Web-dev-server React JS, но не SCSS

0 голосов
/ 25 августа 2018

Приложение создано командой «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 ]

0 голосов
/ 25 августа 2018

Чтобы это сработало, я пошел по этой ссылке , где рассказывается, как добавить препроцессор 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

enter image description here

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

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

0 голосов
/ 25 августа 2018

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

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

  {
       test: /\.scss$/,
       loaders: ["style-loader", "css-loader", "sass-loader"]
  }
...