Open evangow opened 7 years ago
While the below refers to semantic-ui, I would guess the same problem occurs with other ui frameworks.
Installed the boilerplate
$ git clone https://github.com/jhen0409/react-chrome-extension-boilerplate.git $ npm install
Installed semantic ui from https://react.semantic-ui.com/usage
$ npm install semantic-ui-react --save $ npm install semantic-ui-css --save
Imported semantic css inside /app/containers/Root.js import 'semantic-ui-css/semantic.min.css';
import 'semantic-ui-css/semantic.min.css';
I then get the following errors
ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/images/flags.png' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:202659-202708 ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.eot' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264152-264200 6:264218-264266 ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff2' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264315-264365 ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.woff' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264395-264444 ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.ttf' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264473-264521 ERROR in ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css Module not found: Error: Cannot resolve module 'themes/default/assets/fonts/icons.svg' in /Users/evangow/workspace/tuts/boilerplate-wsemui/node_modules/semantic-ui-css @ ./~/css-loader?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/semantic-ui-css/semantic.min.css 6:264554-264602
Trying to solve this, I then installed file-loader and url-loader npm install --save-dev file-loader npm install --save-dev url-loader
npm install --save-dev file-loader
npm install --save-dev url-loader
And I updated /webpack/dev.config.js to use these loaders for the various image file types.
module: { loaders: [ { test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['react-hmre'] } }, { test: /\.css$/, loaders: [ 'style', 'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss' ] }, { test: /\.(png|gif)$/, loader: 'url-loader?limit=1024&name=[name]-[hash:8].[ext]!image-webpack-loader' }, { test: /\.jpg$/, loader: 'file-loader' }, { test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' } ] }
After updating /webpack.dev.config, I continue to get the exact same error.
@evangow you can put css file to chrome/assets/ directly, and use it in xxx.pug file directly. it is the easiest way.
chrome/assets/
xxx.pug
some issue, any suggestion for this problem?
While the below refers to semantic-ui, I would guess the same problem occurs with other ui frameworks.
Installed the boilerplate
Installed semantic ui from https://react.semantic-ui.com/usage
Imported semantic css inside /app/containers/Root.js
import 'semantic-ui-css/semantic.min.css';
I then get the following errors
Trying to solve this, I then installed file-loader and url-loader
npm install --save-dev file-loader
npm install --save-dev url-loader
And I updated /webpack/dev.config.js to use these loaders for the various image file types.
After updating /webpack.dev.config, I continue to get the exact same error.