diff --git a/examples/create-react-app/.env b/examples/create-react-app/.env new file mode 100644 index 00000000..9fb38bf9 --- /dev/null +++ b/examples/create-react-app/.env @@ -0,0 +1,5 @@ + + +SASS_PATH=src/assets/\_scss/loadPathsExample +NODE_PATH=node_modules/ diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json index 2e146148..b51fe525 100644 --- a/examples/create-react-app/package.json +++ b/examples/create-react-app/package.json @@ -45,7 +45,9 @@ ] }, "devDependencies": { + "animate-sass": "^0.8.2", "jest-preview": "file:../..", - "npm-run-all": "^4.1.5" + "npm-run-all": "^4.1.5", + "sass": "^1.50.0" } } diff --git a/examples/create-react-app/src/App.tsx b/examples/create-react-app/src/App.tsx index b1caf790..70036053 100644 --- a/examples/create-react-app/src/App.tsx +++ b/examples/create-react-app/src/App.tsx @@ -6,6 +6,7 @@ import styles from './style.module.css'; import './App.css'; import './assets/css/App.css'; +import './assets/_scss/style.scss'; function App() { const [count, setCount] = useState(0); @@ -17,6 +18,17 @@ function App() { logo2

Create React App example

Styled by CSS Modules

+

+ This text is styled by global configured SASS +

+

This text is styled by imported SASS

+

+ This text is styled by SASS from load paths +

+
+

An animated element style using @import ~

+

Watch me fade in!

+
Learn React"`, + `"
/src/logo.svg\\"logo\\"\\"logo2\\"

Create React App example

Styled by CSS Modules

This text is styled by global configured SASS

This text is styled by imported SASS

This text is styled by SASS from load paths

An animated element style using @import ~

Watch me fade in!

Learn React
"`, ); }); }); diff --git a/examples/create-react-app/src/assets/_scss/global-style.scss b/examples/create-react-app/src/assets/_scss/global-style.scss new file mode 100644 index 00000000..ca28b4cd --- /dev/null +++ b/examples/create-react-app/src/assets/_scss/global-style.scss @@ -0,0 +1,7 @@ +@import 'partials/partial-global-style'; // Example using @import + +header { + .global-configured-sass { + color: yellow; + } +} diff --git a/examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss b/examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss new file mode 100644 index 00000000..cad1255f --- /dev/null +++ b/examples/create-react-app/src/assets/_scss/loadPathsExample/load-path.scss @@ -0,0 +1,5 @@ +header { + .load-path-sass { + color: red; + } +} diff --git a/examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss b/examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss new file mode 100644 index 00000000..294861fc --- /dev/null +++ b/examples/create-react-app/src/assets/_scss/partials/_partial-global-style.scss @@ -0,0 +1,5 @@ +header { + .global-configured-sass { + text-transform: uppercase; + } +} diff --git a/examples/create-react-app/src/assets/_scss/partials/_partial-style.scss b/examples/create-react-app/src/assets/_scss/partials/_partial-style.scss new file mode 100644 index 00000000..ae22fed5 --- /dev/null +++ b/examples/create-react-app/src/assets/_scss/partials/_partial-style.scss @@ -0,0 +1,5 @@ +header { + .imported-sass { + text-transform: uppercase; + } +} diff --git a/examples/create-react-app/src/assets/_scss/style.scss b/examples/create-react-app/src/assets/_scss/style.scss new file mode 100644 index 00000000..0db3cdaa --- /dev/null +++ b/examples/create-react-app/src/assets/_scss/style.scss @@ -0,0 +1,11 @@ +@use 'partials/partial-style'; // Example using @use +@use 'load-path'; // Example of loadPath config + +$use-fadeIn: true; +@import '~animate-sass/animate'; // Example of import ~ + +header { + .imported-sass { + color: pink; + } +} diff --git a/examples/create-react-app/src/index.tsx b/examples/create-react-app/src/index.tsx index ef2edf8e..c3229d4c 100644 --- a/examples/create-react-app/src/index.tsx +++ b/examples/create-react-app/src/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; +import './assets/_scss/global-style.scss'; import App from './App'; import reportWebVitals from './reportWebVitals'; @@ -8,7 +9,7 @@ ReactDOM.render( , - document.getElementById('root') + document.getElementById('root'), ); // If you want to start measuring performance in your app, pass a function diff --git a/examples/create-react-app/src/setupTests.ts b/examples/create-react-app/src/setupTests.ts index c4eeb3b4..faaab917 100644 --- a/examples/create-react-app/src/setupTests.ts +++ b/examples/create-react-app/src/setupTests.ts @@ -6,7 +6,8 @@ import '@testing-library/jest-dom'; import { jestPreviewConfigure } from 'jest-preview'; jestPreviewConfigure({ - externalCss: ['src/index.css'], + externalCss: ['src/index.css', 'src/assets/_scss/global-style.scss'], + sassLoadPaths: ['src/assets/_scss/loadPathsExample'], }); window.matchMedia = (query) => ({