Добавление CSS-файлов в проект React с помощью Webpack 4 - PullRequest
Новая
       21

Добавление CSS-файлов в проект React с помощью Webpack 4

0 голосов
/ 30 января 2019

Я создаю простое приложение React с нуля, используя Webpack.Я наконец смог запустить сервер разработки, и когда я попытался применить некоторые стили с помощью CSS, файлы не загрузились, и я предполагаю, что моя конфигурация Webpack 4 неверна.

Вот код:

webpack.config.js 

// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const path = require('path');


module.exports = {
    mode: 'development',
    entry: ['./src/index.js'],
    resolve: {
        extensions: [".js", ".jsx"]
    },
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: '/dist',
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 8080
    },
    module: {
        rules: [
            {
                test: /\.js|.jsx$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["react"]
                }

            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader'
            }
        ]
    },

};

Структура моего проекта такая, я буду включать только src , потому что он находится в корне: 

 **src**
      |_assets
      |_componentns
      |_styles
        |_App.css
        |_index.css
      App.jsx
      index.js
      index.html

Я хотел бы иметь возможность добавлять несколько CSS-файлов для каждого имеющегося у меня компонента и применять их, а также иметь возможность стилизовать индекс index.html .Большое спасибо за вашу помощь.

Ответы [ 3 ]

0 голосов
/ 30 января 2019

Все, что вам нужно сделать, это импортировать файлы CSS при необходимости, как если бы вы использовали модель JavaScript.Поэтому, если вы хотите иметь таблицу стилей для всего приложения, вы можете импортировать глобальную таблицу стилей в index.js. 

import './styles/index.css';

, и вы можете сделать то же самое для каждого компонента с определенными стилями 

import './styles/App.css'

, в этом случае вы можете настроить модули CSS , чтобы избежать наложения имен классов.

0 голосов
/ 30 января 2019

Хорошо, ошибка новичка здесь, то, как я настроил веб-пакет, я должен сначала собрать его, а затем запустить сервер разработки, а не наоборот.Все ответы выше действительны и полезны, я просто забыл запустить сборку после изменений.

0 голосов
/ 30 января 2019

Ваша webpack конфигурация выглядит нормально.убедитесь, что вы import необходимые css файлы в вашем components. 

import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <Child />
      </div>
    );
  }
}
...