Как использовать Реагировать модуль CSS в Meteor 1.3 бета

Question

EDIT: Meteor 1,3 релиз выходит и npm package собирается быть выпущен позволяет прямое использование модулей CSS без Webpack

---

Я хотел бы используйте https://github.com/gajus/react-css-modules в Meteor 1.3 через NPM. Но readme говорит, что использует Webpack. Я никогда не использовал Webpack, поскольку мне кажется, что я выполняю ту же работу по сборке, что и Meteor.

Знаете ли вы, в данном конкретном случае, использование React Module CSS в Meteor 1.3 beta?

Answer 1

Фактически пакет для этого. ЦДТ также рассматривает возможность переноса веб-пакетов на метеорное ядро ​​на определенном этапе. И да, это инструмент построения. Просто модульная и быстрая, чем текущая. Это также довольно сложно, поскольку инструменты сборки идут, по крайней мере, на мой взгляд.

Чтобы webpacks в метеора только>

meteor add webpack:webpack 
meteor remove ecmascript 

Вы должны удалить ecmascripts, как вы получите их от WebPack, а также и с 2 устанавливается может привести к ошибкам.

Для получения более полной информации об ответах в блоге Sam Corcos и комментариях Бена Страхана для Meteor 1.3 Beta. Я использовал его как учебник, чтобы получить другой пакет веб-пакетов.

https://medium.com/@SamCorcos/meteor-webpack-from-the-ground-up-f123288c7b75#.phcq5lvm8

Для пакета, который вы упомянули, я думаю, webpack.packages.json должен выглядеть как этот

{ 
    "private": true, 
    "scripts": { 
    "start": "webpack-dev-server" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.4.5", 
    "babel-loader": "^6.2.1", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "css-loader": "^0.23.1", 
    "extract-text-webpack-plugin": "^1.0.1", 
    "style-loader": "^0.13.0", 
    "webpack": "^2.0.6-beta", 
    "webpack-dev-server": "^2.0.0-beta" 
    }, 
    "dependencies": { 
    "react": "^0.15.0-alpha.1", 
    "react-css-modules": "^3.7.4", 
    "react-dom": "^0.15.0-alpha.1" 
    } 

И webpack.config.js можно скопировать прямо из

https://github.com/gajus/react-css-modules-examples/blob/master/webpack.config.js

Answer 2

Вы можете начать с нуля, как это.

Начать с нуля

meteor create test-project 
cd test-project 
npm init 
meteor remove ecmascript 
meteor add webpack:webpack 
meteor add webpack:react 
meteor add webpack:less 
meteor add react-runtime # Skip this step if you want to use the NPM version 
meteor add react-meteor-data 
meteor 
npm install 
meteor 

Входные файлы

Файлы ввода определяются в пределах вашего package.json. Главное - ваша запись на сервере, а браузер - ваша клиентская запись.

{ 
    "name": "test-project", 
    "private": true, 
    "main": "server/entry.js", 
    "browser": "client/entry.js" 
} 

Для получения дополнительной информации, пожалуйста, проверьте этот link

Answer 3

Метеор v1.3.2 введены встроенные функции импорта для .css файлов (а также другие CSS препроцессора файлы, такие как less и sass) изнутри .js и .jsx.

Например, учитывая следующее (упрощенно) структуры папок,

 
. 
├── client 
│   └── main.js 
├── imports 
│   └── client 
│    ├── main.css 
│    └── main.jsx 
├── node_modules 
│   └── some-module 
│    └── dist 
│     └── css 
│      └── main.css 
├── package.json 
└── server 
    └── main.js 

, где some-module установлен модуль НПМ с помощью:

$ meteor npm install --save some-module 

импорта локальных и модулей таблиц стилей в imports/client/main.jsx:

// importing a style file from a node module 
import 'some-module/dist/css/main.css'; 

// importing a style from a local file 
import './main.css';