freyhill / react-multi-page-app

🍡 react multi page app/react多页面应用
https://h5cool.com/react-multi-page-app/demo
MIT License
238 stars 81 forks source link

使用element-react,element-theme-default,页面打开空白,无报错 #9

Closed tester-chang closed 2 years ago

tester-chang commented 2 years ago

问题详情: 1.element-theme-default里面的css均带有@符号,打包时无法识别@符号,报错如下: ERROR in ./~/element-theme-default/lib/index.css Module parse failed: /home/tak/workspace/react/FT/node_modules/element-theme-default/lib/index.css Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (1:0) 2.修改webpack.config.js,如下:

      {
          test: /\.css$/,
          use: [ "style-loader","css-loader"],
          // exclude: /node_modules/,       注释了这一行
      },
      {
          test: /\.(ttf|eot|svg|woff|woff2)(\?.+)?$/,        //新增了对字符的处理
          loader: 'file-loader'
      },

打包成功 3.npm run dev 会额外生成style.js及字符文件,结构如下:

|-- build
    |-- index
        |-- index.css
        |-- index.js
    |-- todo
        |-- index.html
        |-- todo.css
        |-- todo.js
    |-- index.html
    |-- style.js
    |-- xxxxx.ttf
    |-- xxxxx.woff

找不到问题所在,应该是打包环节出现了问题,请指点

tester-chang commented 2 years ago

@freyhill 新手对webpack理解不够,请大佬指点迷津~

tester-chang commented 2 years ago

找到问题了,新生成的style.js需要引入到对应的index.html的head部分,需要修改打包方式,已经安装依赖解决regeneratorRuntime,见:https://blog.csdn.net/youhebuke225/article/details/106524984