score:2

Accepted answer

Ok if you want to publish a component library then there are plenty of tutorials available online, and if your specific issue is about not been able to publish your static resources such as css images and scss etc then you can just append a cp command (linux & macos) to your build script

 "scripts": {

    "build": "babel src --out-dir lib --ignore src/__tests__/ && cp -R src/assets lib/",
  },

Notice this towards the end of the command cp -R src/assets this will manually copy your static assets to the desired location when your run npm run build

score:0

You should use file-loader to load image files and css-loader to load your css files.

Your webpack will then know how to deal with your files

If you have created your project with create-react-app. In that case, you just need to import your CSS file and image file to your components.

score:0

You should do this while importing css files :

import './style.css';

If you want to create this from scratch.

Inside your webpack.config.js , insert this (change the path according to your folder structure):

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "index.bundle.js"
  },
  mode: process.env.NODE_ENV || "development",
  resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
  devServer: {
    contentBase: path.join(__dirname, "src"),
    hot: true,
    port: 3000
  },
  module: {
    rules: [
      {
        // this is so that we can compile any React,
        // ES6 and above into normal ES5 syntax
        test: /\.(js|jsx)$/,
        // we do not want anything from node_modules to be compiled
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        loaders: ["file-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

and edit your .babelrc to contain just this:

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

also your package.json should list these dev-dependencies:

@babel/core,@babel/node,@babel/plugin-proposal-class-properties,@babel/preset-env,@babel/preset-react,babel-jest,babel-loader,css-loader,file-loader,html-webpack-plugin,path,style-loader,webpack,webpack-cli,webpack-dev-server

If this doesn't help please paste the link to your github repo. I will take a look.


Related Query

More Query from same tag