How to Use Absolute Path to Import Custom SCSS, When Using React + Webpack

How to use absolute path to import custom scss, when using react + webpack?

Found. Actually you can configure sass-loader in webpack.config.json, as described here : https://github.com/jtangelder/sass-loader

Here is the relevant part :

sassLoader: {
   includePaths: [path.resolve(__dirname, "./some-folder")]
}

Absolute import using Webpack resolve.alias in a React app

as Prakash pointed out above, here's what I needed to do:

resolve: {
        alias: {
            components: path.resolve(__dirname, 'src/components'),
            reducers: path.resolve(__dirname, 'src/reducers')
        },
        extensions: ['.js']
    },

Import react components with absolute path

My file structure follows exactly the same pattern as yours. To teach Jest into using imports beginning with a /, I use babel-plugin-module-resolver and its handy root option. My .babelrc for Jest looks like this:

{
  "presets": ["es2015", "meteor"],
  "plugins": [
    "transform-class-properties",
    "transform-react-constant-elements",
    "transform-react-inline-elements",
    "transform-react-remove-prop-types",
      ["module-resolver", {
      "root": ["../"],
      "alias": {
        "react-router-dom": "react-router-dom/umd/react-router-dom.min.js",
        "redux": "redux/dist/redux.min.js",
        "react-redux": "react-redux/dist/react-redux.min.js"
      }
    }]
  ]
}

As I'm using Meteor which customized its root imports, I hide my Jest usage and configuration into a .jest directory at the root of my repository allowing me to have a specific .babelrc without risking conflicts with Meteor's one.

---

Related Topics