I'm using Rails 6.1.7 with jsbundling-rails
and cssbundling-rails
. I'm bundling with Webpack and Dart sass for js and css respectively. I've tried to follow the docs, and added the sass load paths as follows in my webpack.config.js
:
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
{
loader: "sass-loader",
options: {
sourceMap: true,
sassOptions: {
includePaths: [
"./node_modules/@uswds",
"./node_modules/@uswds/uswds/packages/uswds"
],
},
}
}
],
},
],
}
In my application.sass.scss
file (sass entry point), I have the following:
// Entry point for your Sass build
// 1. Load USWDS settings
@forward "./uswds/uswds-theme";
// 2. Load USWDS source code
@forward "../../../node_modules/@uswds/uswds/packages/uswds";
// 3. Load your project's custom Sass
@forward "./uswds/uswds-theme-custom-styles";
Finally, my package.json
looks like:
"dependencies": {
"@uswds/uswds": "^3.3.0",
"css-loader": "^6.7.3",
"node-sass": "^8.0.0",
"sass": "^1.58.0",
"sass-loader": "^13.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},
"scripts": {
"build": "webpack --config webpack.config.js",
"build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
Now when I run ./bin/dev
to both watch for changes and spin the server up, I receive the following error:
14:40:43 css.1 | Error: Can't find stylesheet to import.
14:40:43 css.1 | ╷
14:40:43 css.1 | 5 │ @forward "uswds-global";
14:40:43 css.1 | │ ^^^^^^^^^^^^^^^^^^^^^^^
14:40:43 css.1 | ╵
14:40:43 css.1 | node_modules/@uswds/uswds/packages/uswds/_index.scss 5:1 @forward
14:40:43 css.1 | node_modules/@uswds/uswds/src/stylesheets/uswds.scss 3:1 @forward
14:40:43 css.1 | app/assets/uswds/styles.scss 2:1 @use
14:40:43 css.1 | app/assets/stylesheets/application.sass.scss 21:1 root stylesheet
14:40:43 css.1 |
14:40:43 css.1 | Sass is watching for changes. Press Ctrl-C to stop.
I'm confused because I'm able to reach the uswds source styles (node_modules/@uswds/uswds/packages/uswds
), but once that file starts looking for the other scss files (uswds-global
, uswds-helpers
, etc.), I start getting errors. Here's the code the error is referencing, which is inside of node_modules/@uswds/uswds/packages/uswds
:
/*! uswds @version */
// Global
// -------------------------------------
@forward "uswds-global";
// Helpers
// -------------------------------------
@forward "uswds-helpers";
// Components
// -------------------------------------
@forward "uswds-typography";
@forward "usa-accordion/src/styles";
@forward "usa-alert/src/styles";
@forward "usa-banner/src/styles";
@forward "usa-breadcrumb/src/styles";
@forward "usa-button-group/src/styles";
@forward "usa-button/src/styles";
@forward "usa-card/src/styles";
@forward "usa-checklist/src/styles";
@forward "usa-collection/src/styles";
@forward "usa-embed-container/src/styles";
@forward "usa-footer/src/styles";
@forward "usa-form/src/styles";
@forward "usa-graphic-list/src/styles";
@forward "usa-header/src/styles";
@forward "usa-hero/src/styles";
@forward "usa-icon-list/src/styles";
@forward "usa-icon/src/styles";
@forward "usa-identifier/src/styles";
@forward "usa-in-page-navigation/src/styles";
@forward "usa-language-selector/src/styles";
@forward "usa-layout-docs/src/styles";
@forward "usa-layout-grid/src/styles";
@forward "usa-media-block/src/styles";
@forward "usa-modal/src/styles";
@forward "usa-nav/src/styles";
@forward "usa-pagination/src/styles";
@forward "usa-process-list/src/styles";
@forward "usa-search/src/styles";
@forward "usa-section/src/styles";
@forward "usa-sidenav/src/styles";
@forward "usa-site-alert/src/styles";
@forward "usa-skipnav/src/styles";
@forward "usa-step-indicator/src/styles";
@forward "usa-summary-box/src/styles";
@forward "usa-table/src/styles";
@forward "usa-tag/src/styles";
@forward "usa-tooltip/src/styles";
@forward "uswds-form-controls";
// Utilities
// -------------------------------------
@forward "uswds-utilities/src/styles";
Does anyone know how I can resolve this issue? I feel like I'm pretty close to compiling the css, but this is the current blocker. Thank you!