загрузчик css с разумом-реакцией - PullRequest
Новая
       37

загрузчик css с разумом-реакцией

0 голосов
/ 14 февраля 2019

Я изо всех сил пытаюсь заставить веб-пакет работать с моим приложением.

Я установил веб-пакет с помощью следующей команды: 

npm install --save-dev webpack

Я установил style-loader и css-loader, используяследующая команда: 

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

Вот пример моего файла package.json: 

 "devDependencies": {
    "bs-platform": "^4.0.18",
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "sw-precache-webpack-plugin": "^0.11.5",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-pwa-manifest": "^4.0.0"
  },
  "dependencies": {
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "reason-react": ">=0.5.3"
  }

Вот пример моего файла webpack.config.js: 

const outputDir = path.join(__dirname, 'build/');

module.exports = {
  entry: './src/Index.bs.js',
  mode: isProd ? 'production' : 'development',
  output: {
    path: outputDir,
    filename: 'index.js',
    publicPath: PUBLIC_PATH
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        { loader: "style-loader" },
        { loader: "css-loader" }
      ]
    }]
  },

Я добавил следующую команду в мой файл Index.re для загрузки моего css-файла: 

[%raw {|require('../css/index.css')|}]

Вот сгенерированный js-файл: 

// Generated by BUCKLESCRIPT VERSION 4.0.18, PLEASE EDIT WITH CARE
'use strict';

var Component1 = require("./Component1.bs.js");
var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
var ReasonReact = require("reason-react/src/ReasonReact.js");

((require('../css/index.css')));

ReactDOMRe.renderToElementWithId(ReasonReact.element(undefined, undefined, Component1.make("Hello!", /* array */[])), "index1");

/*  Not a pure module */

У меня нет ошибки при запуске веб-пакета, но мой css-файл не создается в папке "build" ... Вот мои папки проекта:

Project folders

1 Ответ

0 голосов
/ 14 февраля 2019

Он не генерируется, потому что style-loader добавляет по требованию в заголовок вашего html-файла тег тега стиля.

Для создания физических CSS-файлов используйте mini-css-extract-plugin

...