I installed and ran the example from this site:
https://github.com/cornflourblue/react-redux-registration-login-example
I then attempted to integrate assets from an existing project to customise the login screen and ran with the included webpack set up included in the example.
I am getting two errors from two different scss files that purports to be from the sass-loader:
> ERROR in ./src/LoginPage/styles.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/LoginPage/styles.module.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/assets/fonts/Roboto-Bold.woff2' in 'D:\reactApps\sponsors\src\LoginPage'
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:209:21
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
@ ./src/LoginPage/styles.module.scss 2:12-142 9:17-24 13:15-22
@ ./src/LoginPage/index.jsx
@ ./src/App/App.jsx
@ ./src/App/index.js
@ ./src/index.jsx
>
> ERROR in ./src/components/atoms/Button/styles.module.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/atoms/Button/styles.module.scss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '/assets/fonts/Roboto-Bold.woff2' in 'D:\reactApps\sponsors\src\components\atoms\Button'
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:209:21
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\UnsafeCachePlugin.js:44:7
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
at eval (eval at create (D:\reactApps\sponsors\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:67:43
at D:\reactApps\sponsors\node_modules\enhanced-resolve\lib\Resolver.js:285:5
@ ./src/components/atoms/Button/styles.module.scss 2:12-154 9:17-24 13:15-22
@ ./src/components/atoms/Button/index.js
@ ./src/LoginPage/index.jsx
@ ./src/App/App.jsx
@ ./src/App/index.js
@ ./src/index.jsx
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 854 bytes {0} [built]
[./node_modules/lodash/lodash.js] 531 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i ｢wdm｣: Failed to compile.
Here is my webpack.config.js file:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
resolve: {
extensions: ['.js', '.jsx', 'scss']
},
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{test: /\.(jpg|jpeg|png|otf|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html'
})],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
apiUrl: 'http://localhost:4000'
})
}
}I have a button component that has its own scss that I wish to display. I will consolidate scss components at some point but wish to first explore basic integration.
Here is my folder structure:
The styles.module.scss file for both files in question import _index.scss located within the @themes folder which links to the other scss files within the folder. Both use the following line:
> `@import "/../src/@theme/index";`
Both scss files that are called within the folder structure
font and other scss files called by index.scss
My font imports is as follows:
@font-face {
font-family: "Roboto";
src: url("/assets/fonts/Roboto-Bold.woff2") format("woff2"),
url("/assets/fonts/Roboto-Bold.eot") format("eot"),
url("/assets/fonts/Roboto-Bold.otf") format(".otf"),
url("/assets/fonts/Roboto-Bold.woff") format("woff"),
url("/assets/fonts/Roboto-Bold.ttf") format("ttf");
font-weight: 700;
font-style: normal;
}
If I delete all fonts entries it does work.
My suspicions range from either attempting to load or import css before one instance has had a chance to load or perhaps having multiple references to the same asset.
It could also be that I just don’t have the syntax right for the sass-loader to make sense of things or something all together different.