Giter VIP home page Giter VIP logo

craco-stylus's People

Stargazers

avatar avatar avatar avatar

Watchers

avatar

Forkers

nikitagetman

craco-stylus's Issues

Does not work with stylus-loader 4.x

I just found this repo today, and it's exactly what I need. However, I could not get it to work until I downgraded stylus-loader to 3.x.

Specifically:

node_modules/stylus-loader/dist/cjs.js??ref--5-oneOf-8-3!./src/styles/app.styl)
ValidationError: Invalid options object. Stylus Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'source'. These properties are valid:
   object { stylusOptions?, sourceMap?, webpackImporter?, additionalData? }

I ended up copying the source code and editing it appropriately for the new docs: https://webpack.js.org/loaders/stylus-loader/

Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`)

It works well when running "yarn start".
but when running build, it shows the error msg.

// craco.config.js
const CracoStylusPlugin = require('craco-stylus');
const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  plugins: [
    {
      plugin: CracoStylusPlugin
    }
  ],
  webpack: {
    alias: {
      "@": resolve("src"),
      "@common": resolve("src/common")
    }
  }
}

and here is my package.json

"dependencies": {
    "@craco/craco": "^6.1.1",
    "@reduxjs/toolkit": "^1.5.1",
    "@types/lodash": "^4.14.168",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-transition-group": "^4.4.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "typescript": "^4.2.3",
  },
"devDependencies": {
    "@types/axios": "^0.14.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-redux": "^7.1.16",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-transition-group": "^4.4.1",
    "@types/redux": "^3.6.0",
    "@typescript-eslint/parser": "^4.19.0",
    "craco-stylus": "^1.1.1",
    "css-loader": "^4.3.0",
    "eslint-config-react-app": "^6.0.0",
    "mini-css-extract-plugin": "^1.4.0",
    "stylus": "^0.54.8",
    "stylus-loader": "^4.3.3"
  }

I've tried several versions of 'mini-css-extract-plugin' and 'stylus-loader', none of them work. So could you please tell me how to solve this problem Or show your package.json file. Thx a lot!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.