mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-11 16:17:25 +02:00
feat: add .css webpack loader
This commit is contained in:
endiliey
parent
ea706d2830
commit
1564edae4c
9 changed files with 202 additions and 41 deletions
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<title><%- title %></title>
|
||||
<% css.forEach(function(file){ %>
|
||||
<link href="<%- file %>" rel="stylesheet">
|
||||
<link href="<%-baseUrl %><%- file %>" rel="stylesheet">
|
||||
<% }); %>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import React from 'react';
|
||||
import style from './layout.css';
|
||||
|
||||
export default class Layout extends React.Component {
|
||||
render() {
|
||||
const {children} = this.props;
|
||||
return <div>{children}</div>;
|
||||
return <div className={style.mainContainer}>{children}</div>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
10
lib/theme/layout.css
Normal file
10
lib/theme/layout.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.mainContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 30px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
const Config = require('webpack-chain');
|
||||
const CSSExtractPlugin = require('mini-css-extract-plugin');
|
||||
const path = require('path');
|
||||
|
||||
const mdLoader = require.resolve('./loader/markdown');
|
||||
|
|
@ -71,5 +72,30 @@ module.exports = function createBaseConfig(props) {
|
|||
.loader(mdLoader)
|
||||
.options({siteConfig});
|
||||
|
||||
const cssRule = config.module.rule('css').test(/\.css$/);
|
||||
if (isProd) {
|
||||
cssRule.use('extract-css-loader').loader(CSSExtractPlugin.loader);
|
||||
} else {
|
||||
cssRule.use('style-loader').loader('style-loader');
|
||||
}
|
||||
cssRule
|
||||
.use('css-loader')
|
||||
.loader('css-loader')
|
||||
.options({
|
||||
modules: true,
|
||||
importLoaders: 1,
|
||||
localIdentName: `[local]_[hash:base64:8]`,
|
||||
sourceMap: !isProd,
|
||||
minimize: true
|
||||
});
|
||||
|
||||
// mini-css-extract plugin
|
||||
config.plugin('extract-css').use(CSSExtractPlugin, [
|
||||
{
|
||||
filename: isProd ? '[name].[chunkhash].css' : '[name].css',
|
||||
chunkFilename: isProd ? '[id].[chunkhash].css' : '[id].css'
|
||||
}
|
||||
]);
|
||||
|
||||
return config;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -18,11 +18,7 @@ module.exports = function createDevConfig(props) {
|
|||
title: siteConfig.title
|
||||
}
|
||||
]);
|
||||
config.plugin('WebpackNiceLog').use(webpackNiceLog, [
|
||||
{
|
||||
name: 'Development'
|
||||
}
|
||||
]);
|
||||
config.plugin('niceLog').use(webpackNiceLog, [{name: 'Development'}]);
|
||||
|
||||
return config;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@
|
|||
"chokidar": "^2.0.4",
|
||||
"commander": "^2.16.0",
|
||||
"connect-history-api-fallback": "^1.5.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"ejs": "^2.6.1",
|
||||
"front-matter": "^2.3.0",
|
||||
"fs-extra": "^7.0.0",
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
"koa-range": "^0.3.0",
|
||||
"koa-static": "^5.0.0",
|
||||
"loader-utils": "^1.1.0",
|
||||
"mini-css-extract-plugin": "^0.4.1",
|
||||
"portfinder": "^1.0.13",
|
||||
"prismjs": "^1.15.0",
|
||||
"react": "^16.4.1",
|
||||
|
|
@ -68,6 +70,7 @@
|
|||
"remarkable": "^1.7.1",
|
||||
"semver": "^5.5.0",
|
||||
"static-site-generator-webpack-plugin": "^3.4.1",
|
||||
"style-loader": "^0.22.1",
|
||||
"webpack": "^4.16.3",
|
||||
"webpack-chain": "^4.8.0",
|
||||
"webpack-nicelog": "^2.2.1",
|
||||
|
|
|
|||
41
website/pages/tictactoe.css
Normal file
41
website/pages/tictactoe.css
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
.boardRow:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.square {
|
||||
background: #fff;
|
||||
border: 1px solid #999;
|
||||
float: left;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 34px;
|
||||
height: 34px;
|
||||
margin-right: -1px;
|
||||
margin-top: -1px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: 34px;
|
||||
}
|
||||
|
||||
.square:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.game {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.gameInfo {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.gameBoard {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -1,34 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
const square = {
|
||||
background: '#fff',
|
||||
border: '1px solid #999',
|
||||
float: 'left',
|
||||
fontSize: '24px',
|
||||
fontWeight: 'bold',
|
||||
lineHeight: '34px',
|
||||
height: '34px',
|
||||
marginright: '-1px',
|
||||
marginTop: '-1px',
|
||||
padding: '0',
|
||||
textAlign: 'center',
|
||||
width: '34px'
|
||||
};
|
||||
|
||||
const boardRow = {
|
||||
clear: 'both',
|
||||
content: '',
|
||||
display: 'table'
|
||||
};
|
||||
|
||||
const game = {
|
||||
display: 'flex',
|
||||
flexDirection: 'row'
|
||||
};
|
||||
import style from './tictactoe.css';
|
||||
|
||||
function Square(props) {
|
||||
return (
|
||||
<button style={square} onClick={props.onClick}>
|
||||
<button className={style.square} onClick={props.onClick}>
|
||||
{props.value}
|
||||
</button>
|
||||
);
|
||||
|
|
@ -67,17 +42,17 @@ class Board extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style={boardRow}>
|
||||
<div className={style.boardRow}>
|
||||
{this.renderSquare(0)}
|
||||
{this.renderSquare(1)}
|
||||
{this.renderSquare(2)}
|
||||
</div>
|
||||
<div style={boardRow}>
|
||||
<div className={style.boardRow}>
|
||||
{this.renderSquare(3)}
|
||||
{this.renderSquare(4)}
|
||||
{this.renderSquare(5)}
|
||||
</div>
|
||||
<div style={boardRow}>
|
||||
<div className={style.boardRow}>
|
||||
{this.renderSquare(6)}
|
||||
{this.renderSquare(7)}
|
||||
{this.renderSquare(8)}
|
||||
|
|
@ -149,11 +124,11 @@ class Game extends React.Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div style={game}>
|
||||
<div>
|
||||
<div className={style.game}>
|
||||
<div className={style.gameBoard}>
|
||||
<Board squares={current.squares} onClick={i => this.handleClick(i)} />
|
||||
</div>
|
||||
<div style={{marginLeft: '10px'}}>
|
||||
<div className={style.gameInfo}>
|
||||
<div>{status}</div>
|
||||
<ol>{moves}</ol>
|
||||
</div>
|
||||
|
|
|
|||
111
yarn.lock
111
yarn.lock
|
|
@ -1777,6 +1777,23 @@ crypto-random-string@^1.0.0:
|
|||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
|
||||
|
||||
css-loader@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-1.0.0.tgz#9f46aaa5ca41dbe31860e3b62b8e23c42916bf56"
|
||||
dependencies:
|
||||
babel-code-frame "^6.26.0"
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
icss-utils "^2.1.0"
|
||||
loader-utils "^1.0.2"
|
||||
lodash.camelcase "^4.3.0"
|
||||
postcss "^6.0.23"
|
||||
postcss-modules-extract-imports "^1.2.0"
|
||||
postcss-modules-local-by-default "^1.2.0"
|
||||
postcss-modules-scope "^1.1.0"
|
||||
postcss-modules-values "^1.3.0"
|
||||
postcss-value-parser "^3.3.0"
|
||||
source-list-map "^2.0.0"
|
||||
|
||||
css-select@^1.1.0, css-select@~1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
|
||||
|
|
@ -1786,10 +1803,22 @@ css-select@^1.1.0, css-select@~1.2.0:
|
|||
domutils "1.5.1"
|
||||
nth-check "~1.0.1"
|
||||
|
||||
css-selector-tokenizer@^0.7.0:
|
||||
version "0.7.0"
|
||||
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
|
||||
dependencies:
|
||||
cssesc "^0.1.0"
|
||||
fastparse "^1.1.1"
|
||||
regexpu-core "^1.0.0"
|
||||
|
||||
css-what@2.1:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
|
||||
|
||||
cssesc@^0.1.0:
|
||||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
|
||||
|
||||
cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
|
||||
version "0.3.4"
|
||||
resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
|
||||
|
|
@ -2585,6 +2614,10 @@ fast-levenshtein@~2.0.4:
|
|||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
|
||||
|
||||
fastparse@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
|
||||
|
||||
faye-websocket@~0.11.0:
|
||||
version "0.11.1"
|
||||
resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
|
||||
|
|
@ -3178,6 +3211,16 @@ iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
|
|||
dependencies:
|
||||
safer-buffer ">= 2.1.2 < 3"
|
||||
|
||||
icss-replace-symbols@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
|
||||
|
||||
icss-utils@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-2.1.0.tgz#83f0a0ec378bf3246178b6c2ad9136f135b1c962"
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
|
||||
ieee754@^1.1.11, ieee754@^1.1.4:
|
||||
version "1.1.12"
|
||||
resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
|
||||
|
|
@ -4256,6 +4299,10 @@ lodash.bind@^4.1.4:
|
|||
version "4.2.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.bind/-/lodash.bind-4.2.1.tgz#7ae3017e939622ac31b7d7d7dcb1b34db1690d35"
|
||||
|
||||
lodash.camelcase@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
|
|
@ -4537,6 +4584,14 @@ mimic-fn@^1.0.0:
|
|||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
|
||||
|
||||
mini-css-extract-plugin@^0.4.1:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.1.tgz#d2bcf77bb2596b8e4bd9257e43d3f9164c2e86cb"
|
||||
dependencies:
|
||||
"@webpack-contrib/schema-utils" "^1.0.0-beta.0"
|
||||
loader-utils "^1.1.0"
|
||||
webpack-sources "^1.1.0"
|
||||
|
||||
minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
|
||||
|
|
@ -5234,6 +5289,45 @@ posix-character-classes@^0.1.0:
|
|||
version "0.1.1"
|
||||
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
|
||||
|
||||
postcss-modules-extract-imports@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
|
||||
dependencies:
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-local-by-default@^1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
|
||||
dependencies:
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-scope@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
|
||||
dependencies:
|
||||
css-selector-tokenizer "^0.7.0"
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-modules-values@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
|
||||
dependencies:
|
||||
icss-replace-symbols "^1.1.0"
|
||||
postcss "^6.0.1"
|
||||
|
||||
postcss-value-parser@^3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
|
||||
|
||||
postcss@^6.0.1, postcss@^6.0.23:
|
||||
version "6.0.23"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
|
||||
dependencies:
|
||||
chalk "^2.4.1"
|
||||
source-map "^0.6.1"
|
||||
supports-color "^5.4.0"
|
||||
|
||||
prelude-ls@~1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
|
||||
|
|
@ -5616,6 +5710,14 @@ regexpp@^1.0.1:
|
|||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
|
||||
|
||||
regexpu-core@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
|
||||
dependencies:
|
||||
regenerate "^1.2.1"
|
||||
regjsgen "^0.2.0"
|
||||
regjsparser "^0.1.4"
|
||||
|
||||
regexpu-core@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-2.0.0.tgz#49d038837b8dcf8bfa5b9a42139938e6ea2ae240"
|
||||
|
|
@ -6267,6 +6369,13 @@ strip-json-comments@~2.0.1:
|
|||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
|
||||
|
||||
style-loader@^0.22.1:
|
||||
version "0.22.1"
|
||||
resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.22.1.tgz#901ea28aac78fcc00c5075585ac07d7ef3f87a52"
|
||||
dependencies:
|
||||
loader-utils "^1.1.0"
|
||||
schema-utils "^0.4.5"
|
||||
|
||||
supports-color@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
|
|
@ -6277,7 +6386,7 @@ supports-color@^3.1.2:
|
|||
dependencies:
|
||||
has-flag "^1.0.0"
|
||||
|
||||
supports-color@^5.3.0:
|
||||
supports-color@^5.3.0, supports-color@^5.4.0:
|
||||
version "5.4.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue