如何引入antd呢 about react-imvc HOT 3 CLOSED

react-imvc 的 css 引用方式是通过 controller 的 preload 配置配合 Style 组件完成的，见文档Style

import React from 'react'
import Controller from 'react-imvc/controller'
import { Style } from 'react-imvc/component' // 加载 Style 组件

export default class extends Controller {
  preload = {
    main: 'path/to/css' // 配置 css 文件路径
  }
  View = View
}

// 当组件渲染时，Style 标签会将 preload 里的同名 css 内容，展示为 style 标签。
function View() {
  return (
    <div>
      <Style name="main" />
    </div>
  )
}

将 antd 的 antd.css 文件拷贝到 src/css/antd.css，然后配置 preload.antd 为 /css/antd.css，让 controller 自动取预加载内容，然后通过 <Style name="antd" /> 去渲染样式内容。

from react-imvc.

在/src/css目录中增加private_antd.less文件
@import 'antd/dist/antd.less';

增加gulpfile.js文件
`const gulp = require('gulp');
const less = require('gulp-less');

gulp.task('less', function () {
return gulp
.src('./src/**/*.less')
.pipe(less({ javascriptEnabled: true }))
.pipe(gulp.dest('./publish/src'))
.pipe(gulp.dest('./publish/static'))
.pipe(gulp.dest('./src'));
});

gulp.task('watch', function () {
return gulp.watch('./src/**/*.less', gulp.series('less'));
});
在routes中的Layout文件中插入<link href={${props.publicPath}/css/private_antd.css} rel="stylesheet" type="text/css">`

package.json中 scripts中增加
"start": "concurrently 'npm:work' 'npm:watch'",
"work": "react-imvc start --config imvc.config.js",
"watch": "gulp watch",

然后就可以愉快的使用less了

from react-imvc.

是的：）

react-imvc 支持通过 preload 方式引入原生 css 文件。编写 less/postcss 可以通过 gulp task 的方式生成原生 css 文件~~

from react-imvc.