Silind-Software / direflow

🧩 Use the best of two worlds. Create fast, performant, native Web Components using React.
https://direflow.io
MIT License
501 stars 78 forks source link

[Question] How to load external CSS from a node_moodules package #241

Open arthurhamon opened 3 years ago

arthurhamon commented 3 years ago

Hi and thank you for the help.

I have installed an external package, for example @name/my-package.

How can I load the css from this package using external-loader ?

I've tried to do it like this but its not working.


"plugins": [
      {
        "name": "external-loader",
        "options": {
          "paths": [
            "~@name/my-package/style.css"
          ]
        }
      }
    ]
vijay122 commented 2 years ago

If i understand your question properly, You should be able to include css files by directly importing them in your direflow components. Filename : direflow-components/index.js

import "@name/my-package/style.css";

if you want to add additional loaders for the css file type, add webpack config for direflow, Filename : direflow-webpack.js

                      module.exports = (config, env) => ({
                      ...webpackConfig(config, env),
                      module: {
                        rules: [
                          {
                            test: /\.(sa|sc|c)ss$/,
                            loader: ["style-loader", "css-loader", "sass-loader"],
                          },
                        ],
                      },
                      // Add your own webpack config here (optional)
                    });