Блог

Я установил и запустил пример с этого сайта:

https://github.com/cornflourblue/react-redux-registration-login-example

Затем я попытался интегрировать ресурсы из существующего проекта, чтобы настроить экран входа в систему, и запустил включенный веб-пакет, настроенный в примере.

Я получаю две ошибки из двух разных файлов scss, которые предположительно принадлежат загрузчику sass:

  > 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:reactAppssponsorssrcLoginPage'
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:209:21
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibUnsafeCachePlugin.js:44:7
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibDescriptionFilePlugin.js:67:43
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.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:reactAppssponsorssrccomponentsatomsButton'
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:209:21
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibUnsafeCachePlugin.js:44:7
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.js:285:5
    at eval (eval at create (D:reactAppssponsorsnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:27:1)
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibDescriptionFilePlugin.js:67:43
    at D:reactAppssponsorsnode_modulesenhanced-resolvelibResolver.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.
 

скриншот сообщения об ошибке

Вот мой webpack.config.js файл:

 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:

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;
    } 


 
font syntax screenshot
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.