diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js index 25595dfd0..681e14975 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/webpack.config.js @@ -10,20 +10,8 @@ module.exports = ({ config }) => { }) config.module.rules.push({ - test: /\.css$/, - use: [ - { - loader: 'postcss-loader', - options: { - ident: 'postcss', - plugins: [ - require('postcss-import'), - require('tailwindcss'), - require('autoprefixer') - ] - } - } - ], + test: /\.scss$/, + use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../') }) diff --git a/components/Button.tsx b/components/Button.tsx index 4bd3efe26..f7612263d 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -5,9 +5,7 @@ type Props = { } const Button = ({ text }: Props) => ( - + ) export default Button diff --git a/components/LandingNav.tsx b/components/LandingNav.tsx new file mode 100644 index 000000000..bcf0db1e9 --- /dev/null +++ b/components/LandingNav.tsx @@ -0,0 +1,34 @@ +import * as React from 'react' +import '../scss/navbar.scss' + +const LandingNav = () => { + return ( + + ) +} + +export default LandingNav diff --git a/next.config.js b/next.config.js index 1847fbf7b..75b641727 100644 --- a/next.config.js +++ b/next.config.js @@ -1,2 +1,2 @@ -const withCSS = require('@zeit/next-css') -module.exports = withCSS({}) +const withSass = require('@zeit/next-sass') +module.exports = withSass({}) diff --git a/package.json b/package.json index cb2bfed5c..7acf11b41 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,12 @@ "type-check": "tsc" }, "dependencies": { - "@zeit/next-css": "^1.0.1", + "@zeit/next-sass": "^1.0.1", + "bootstrap": "^4.4.1", + "identity-obj-proxy": "^3.0.0", "isomorphic-unfetch": "3.0.0", "next": "latest", + "node-sass": "^4.13.1", "react": "^16.12.0", "react-dom": "^16.12.0" }, @@ -30,7 +33,6 @@ "@types/styled-jsx": "^2.2.8", "@typescript-eslint/eslint-plugin": "^2.17.0", "@typescript-eslint/parser": "^2.17.0", - "autoprefixer": "^9.7.4", "babel-jest": "^25.1.0", "babel-loader": "^8.0.6", "babel-preset-react-app": "^9.1.0", @@ -39,12 +41,14 @@ "eslint-plugin-prettier": "^3.1.2", "eslint-plugin-react": "^7.18.0", "jest": "^25.1.0", - "postcss-import": "^12.0.1", - "postcss-preset-env": "^6.7.0", "prettier": "^1.19.1", "react-test-renderer": "^16.12.0", - "tailwindcss": "^1.1.4", "typescript": "3.7.3" }, - "license": "ISC" + "license": "ISC", + "jest": { + "moduleNameMapper": { + "\\.(css|scss)$": "identity-obj-proxy" + } + } } diff --git a/pages/_app.tsx b/pages/_app.tsx index 1b1433af3..1b44724a3 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { AppProps } from 'next/app' -import '../styles/tailwind.css' +import '../scss/index.scss' function MyApp({ Component, pageProps }: AppProps) { return diff --git a/pages/index.tsx b/pages/index.tsx index b5e238bcc..fb7f3f21d 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,12 @@ import * as React from 'react' +import LandingNav from '../components/LandingNav' const IndexPage: React.FC = () => { - return

Under Construction

+ return ( +
+ +
+ ) } export default IndexPage diff --git a/postcss.config.js b/postcss.config.js deleted file mode 100644 index 54dfa4417..000000000 --- a/postcss.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - plugins: [require('tailwindcss'), require('postcss-preset-env')] -} diff --git a/scss/index.scss b/scss/index.scss new file mode 100644 index 000000000..561ec1bc4 --- /dev/null +++ b/scss/index.scss @@ -0,0 +1,9 @@ +// Override default variables before the import +$body-bg: #fff; + +$theme-colors: ( + "primary": rgb(84,64,216) +); + +// Import Bootstrap and its default variables +@import '~bootstrap/scss/bootstrap.scss'; diff --git a/scss/navbar.scss b/scss/navbar.scss new file mode 100644 index 000000000..636343bfa --- /dev/null +++ b/scss/navbar.scss @@ -0,0 +1,4 @@ +.navbar-brand { + font-family: 'PT Mono', sans-serif; + font-size: 30px; +} diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx index bb534f8fb..c5dfdbff4 100644 --- a/stories/Button.stories.tsx +++ b/stories/Button.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { storiesOf } from '@storybook/react' import Button from '../components/Button' -import '../styles/tailwind.css' +import '../scss/index.scss' storiesOf('Button', module).add('with text', () => { return