Add sourceRoot/includePaths to loaders

Use the settings modal as an example/testcase

app/javascript/glitch/components/settings/container.js

@@ -2,11 +2,11 @@
 import { connect } from 'react-redux';
 
 //  Mastodon imports  //
-import { closeModal } from '../../../mastodon/actions/modal';
+import { closeModal } from 'mastodon/actions/modal';
 
 //  Our imports  //
-import { changeLocalSetting } from '../../actions/local_settings';
+import { changeLocalSetting } from 'glitch/actions/local_settings';
-import Settings from '../../components/settings';
+import Settings from 'glitch/components/settings';
 
 const mapStateToProps = state => ({
   settings: state.get('local_settings'),

app/javascript/glitch/components/settings/index.js

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 
+import './stylesheet';
+
 //  Our imports  //
 import SettingsItem from './item';
 

app/javascript/glitch/components/settings/stylesheet.scss

@@ -0,0 +1,84 @@
+@import 'variables';
+
+.settings-modal {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  background: $ui-secondary-color;
+  color: $ui-base-color;
+  border-radius: 8px;
+  height: 80vh;
+  width: 80vw;
+  max-width: 740px;
+  max-height: 450px;
+  overflow: hidden;
+
+  label {
+    display: block;
+  }
+
+  h1 {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 20px;
+  }
+
+  h2 {
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 20px;
+    margin-top: 20px;
+    margin-bottom: 10px;
+  }
+}
+
+.settings-modal__navigation {
+  background: $primary-text-color;
+  color: $ui-base-color;
+  width: 200px;
+  font-size: 15px;
+  line-height: 20px;
+  overflow-y: auto;
+
+  .settings-modal__navigation-item, .settings-modal__navigation-close {
+    display: block;
+    padding: 15px 20px;
+    cursor: pointer;
+    outline: none;
+    text-decoration: none;
+  }
+
+  .settings-modal__navigation-item {
+    background: $primary-text-color;
+    color: inherit;
+    border-bottom: 1px $ui-primary-color solid;
+    transition: background .3s;
+
+    &:hover {
+      background: $ui-secondary-color;
+    }
+
+    &.active {
+      background: $ui-highlight-color;
+      color: $primary-text-color;
+    }
+  }
+
+  .settings-modal__navigation-close {
+    background: $error-value-color;
+    color: $primary-text-color;
+  }
+}
+
+.settings-modal__content {
+  display: block;
+  flex: auto;
+  padding: 15px 20px 15px 20px;
+  width: 360px;
+  overflow-y: auto;
+
+  select {
+    margin-bottom: 5px;
+  }
+}

app/javascript/styles/components.scss

@@ -3659,89 +3659,6 @@ button.icon-button.active i.fa-retweet {
   margin-bottom: 20px;
 }
 
-.settings-modal {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  background: $ui-secondary-color;
-  color: $ui-base-color;
-  border-radius: 8px;
-  height: 80vh;
-  width: 80vw;
-  max-width: 740px;
-  max-height: 450px;
-  overflow: hidden;
-
-  label {
-    display: block;
-  }
-
-  h1 {
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 24px;
-    margin-bottom: 20px;
-  }
-
-  h2 {
-    font-size: 15px;
-    font-weight: 500;
-    line-height: 20px;
-    margin-top: 20px;
-    margin-bottom: 10px;
-  }
-}
-
-.settings-modal__navigation {
-  background: $primary-text-color;
-  color: $ui-base-color;
-  width: 200px;
-  font-size: 15px;
-  line-height: 20px;
-  overflow-y: auto;
-
-  .settings-modal__navigation-item, .settings-modal__navigation-close {
-    display: block;
-    padding: 15px 20px;
-    cursor: pointer;
-    outline: none;
-    text-decoration: none;
-  }
-
-  .settings-modal__navigation-item {
-    background: $primary-text-color;
-    color: inherit;
-    border-bottom: 1px $ui-primary-color solid;
-    transition: background .3s;
-
-    &:hover {
-      background: $ui-secondary-color;
-    }
-
-    &.active {
-      background: $ui-highlight-color;
-      color: $primary-text-color;
-    }
-  }
-
-  .settings-modal__navigation-close {
-    background: $error-value-color;
-    color: $primary-text-color;
-  }
-}
-
-.settings-modal__content {
-  display: block;
-  flex: auto;
-  padding: 15px 20px 15px 20px;
-  width: 360px;
-  overflow-y: auto;
-
-  select {
-    margin-bottom: 5px;
-  }
-}
-
 .onboard-sliders {
   display: inline-block;
   max-width: 30px;

config/webpack/loaders/babel.js

@@ -8,5 +8,6 @@ module.exports = {
   loader: 'babel-loader',
   options: {
     forceEnv: process.env.NODE_ENV || 'development',
+    sourceRoot: 'app/javascript',
   },
 };

config/webpack/loaders/sass.js

@@ -9,7 +9,7 @@ module.exports = {
       { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
       { loader: 'postcss-loader', options: { sourceMap: true } },
       'resolve-url-loader',
-      'sass-loader',
+      { loader: 'sass-loader', options: { includePaths: ['app/javascript/styles'] } },
     ],
   }),
 };