Handling Sass Imports

[sashafklein]

My app has a Sass structure where individual component .scss files, collocated with the components they style, use Sass imports (@import ...) to pull in global variables from a centralized styles folder.

When I try using this package:

  plugins: [
    css({
      preprocessor: 'sass'
    })
  ]

I get the following error on doc build:

./src/components/Dropdown/Dropdown.scss 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @import 'styles/_sass-includes.scss';

I assume once I clear up this error, I may also have to set up the root folder for Webpack to search for these styles (eg something like the below):

  plugins: [
    css({
      preprocessor: 'sass',
      loaderOpts: {
        includePaths: [path.resolve(__dirname, 'src')]
      },
    })
  ]

But before I hit that error, I'm having trouble figuring out how to handle this one, and get the internal Sass dependencies to import.

Is this something this plugin supports?

[Shugaev]

import { css } from "docz-plugin-css";
const path = require("path");

export default {
    /* 
        Setting src helps avoid relative path hell for non CSS files. 
        In other words, if you're using "baseUrl" in jsconfig, duplicate path in "src" option
    */
    src: "src",
    plugins: [
        css({
            preprocessor: "sass",
            // cssmodules: true,
            /* 
                src equivalent for your styles
            */
            loaderOpts: {
                includePaths: [path.resolve(__dirname, "src")]
            }
        }),
        /* 
            Finally, you may also need to use plain CSS
        */
        css() 
    ]
};

[kivervinicius]

:( same here, any soluction?

[johanazhu]

same here

[avvazana]

Anyone figure out how to resolve this? I'm able to use .css files, but the moment I switch over to .scss I get a similar error: Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

[kayosouza]

Same thing here. Didnt have this issue when running only docz not attached to a real project.

[trybick]

I believe this plugin docz-plugin-css is only for docz v1. With docz v2 there is a new way:

https://www.docz.site/docs/usage-with-css-preprocessors

[kayosouza]

Just figured out the solution for our team:

We don't use docz:build nor docz:dev if it's a gatsby project. You have to run gatsby develop and the error won't occur. Just set up the route in index.mdx to be on /docs, and everything works. Set up the routes on every .mdx file to be relative to /docs.

If you project isn't build on top of gatsby, this won't work for you. I got this error because i didn't understood the documentation correctly, if your project is built with gatsby you shouldn't run docz commands, just configure the routes on de mdx files properly and it works.