@10up/frontity-build-config 中文文档教程
@10up/frontity-webpack-config
这个包扩展了 frontity 默认的 webpack 和 babel 配置
Requirements
- @frontity/core >= 1.14.0
Installation
要安装这个包，你需要一个现有的 frontity 项目。 查看 frontity 文档 以获取说明。
安装这个包：
npm install @10upfrontity-build-config --save
然后在你的 frontitiy.settings.[js|ts] 的 packages 部分添加包。
packages: [
'@10upfrontity-build-config',
]
Settings
这个包接受一个 publicPath 设置，以防您使用不同的公共路径为您的资产构建前端。
{
name: '@10upfrontity-build-config',
state: {
TenUpBuildConfig: {
publicPath: '/custom-public-path'
}
}
}
css 被编译为 /build/[publicPath]/css/index.css 并自动包含在标头中。
Features
Global Sass and PostCSS
只需在任何地方导入 sass 或 postcss 文件，它们就会自动加载到页面上。
import '../assets/index.scss';
import '../assets/index.css';
/* assets/index.css */
a {
color: blue !important;
}
/* assets/index.scss */
header {
h1.heading-size-1 {
color: pink;
}
}
CSS Modules
import styles from './index.module.css';
const App = () => {
return (
<div className={styles.mainContent}></div>
);
}
/* index.module.css */
.mainContent {
min-height: calc(100vh - 190px);
}
HMR
热模块重新加载开箱即用。
@10up/frontity-webpack-config
This package extends frontity default webpack and babel config
Requirements
- @frontity/core >= 1.14.0
Installation
To install this package you will need an existing frontity project. Check out the frontity docs for instructions.
Install this package:
npm install @10upfrontity-build-config --save
Then in your frontitiy.settings.[js|ts] add the package in the packages section.
packages: [
'@10upfrontity-build-config',
]
Settings
This package accepts a publicPath setting in case you're building frontity with a different public path for your assets.
{
name: '@10upfrontity-build-config',
state: {
TenUpBuildConfig: {
publicPath: '/custom-public-path'
}
}
}
The the css is compiled to /build/[publicPath]/css/index.css and automatically included in the header.
Features
Global Sass and PostCSS
Just import the sass or postcss files anywhere and they will automatically be loaded on the page.
import '../assets/index.scss';
import '../assets/index.css';
/* assets/index.css */
a {
color: blue !important;
}
/* assets/index.scss */
header {
h1.heading-size-1 {
color: pink;
}
}
CSS Modules
import styles from './index.module.css';
const App = () => {
return (
<div className={styles.mainContent}></div>
);
}
/* index.module.css */
.mainContent {
min-height: calc(100vh - 190px);
}
HMR
Hot Module Reload works out of the box.
