ダウンロードしたmaterial-uiのexampleがうまく動かない

最近もっぱらReact！
まとまった感じに書けていい！

なんか今マテリアルデザインというものがきてるらしいですね。
代表的なライブラリに

1. Polymer

2.

3. Material UI

の3つが挙げられます。まず、Polymer
敷居が高いです。
次,Materialize
比較的簡単に使えます。ただ、Reactでなんか使えなくて、使うの諦めました。
最後のMaterial UI
Reactで使えます。

material-uiをgithubからダウンロードしてきて、フォルダのexampleを実行しようとすると、lessファイルがうまくcssに変換できません。なんかやり方が間違っているのか。
とりあえずの解決方法見つけました。
sassを使います。
material-ui-sassというモジュールがあるのでそれを入れます
npm i material-ui-sass --save
とターミナルで打ちます。
そしてもう一つ
npm i gulp-sass --save-dev
あとは
exampleの中にある。gulpフォルダの中にsass.jsファイルを作り

var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
handleErrors = require('../util/handleErrors'),
config = require('../config').sass;

gulp.task('sass', function() {
return gulp.src(config.src, {style: 'expanded'})
.pipe(sourcemaps.init())
.pipe(sass())
.on('error', handleErrors)
.pipe(autoprefixer({cascade: false, browsers: ['last 2 versions']}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.dest));
});

のようにした。
元からあるless.jsファイルを参考。
build.jsの中身を
var gulp = require('gulp');

gulp.task('build', ['browserify', 'markup', 'sass']);

watch.jsのgulp.taskを
gulp.task('watch', ['setWatch', 'browserSync'], function() {
// gulp.watch(config.less.watch, ['less']);
gulp.watch(config.sass.watch, ['sass']);
gulp.watch(config.markup.src, ['markup']);
});

のようにする。
config.jsは
var dest = './build',
src = './src',
mui = './node_modules/material-ui/src',
muis = './node_modules/material-ui-sass/material-ui';

module.exports = {
browserSync: {
server: {
// We're serving the src folder as well
// for sass sourcemap linking
baseDir: [dest, src]
},
files: [
dest + '/**'
]
},
less: {
src: src + '/less/app.less',
watch: [
src + '/less',
mui + '/less'
],
dest: dest
},
sass: {
src: src + '/sass/app.scss',
watch: muis,
dest: dest
},
markup: {
src: src + "/www/**",
dest: dest
},
browserify: {
// Enable source maps
debug: true,
// A separate bundle will be generated for each
// bundle config in the list below
bundleConfigs: [{
entries: src + '/app/app.jsx',
dest: dest,
outputName: 'app.js'
}]
}
};

srcフォルダの中にsassフォルダを作り中にapp.scssを含める。
そして、ターミナルでgulp実行で動きました。


スポンサーリンク

---

タグ：react material design gulp