ToCss failing when importing regular .css file

support
1

Attempting to run a import of a regular css file in main.scss is causing Hugo to fail the build. Previously this would work, (i.e we’d not get a regular css import and instead the css file would be included with the rest of our scss partial imports.

Here’s my pipeline, all works fine when I omit the css import:

    {{/* Pipe our styles */}}
       {{ $stylesOptions := ( dict "targetPath" "/css/combined-styles.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules/" )) }}
       {{ $postCssOptions := (dict "config" "postcss.config.js" "use" "autoprefixer") }}
       {{ $styles := resources.Get "scss/combined-styles.scss" | resources.ToCSS $stylesOptions | resources.PostCSS $postCssOptions | resources.Fingerprint }}
       <link rel="stylesheet" href="{{ $styles.Permalink }}">

… and here’s the offending css import (note I’ve omited the file name as this shouldn’t be required)

@import "flickity/dist/flickity";

Any ideas if this is a bug or somthing the SCSS compiler doesn’t support?

full main.scss below for reference, note Foundation imports fine as it’s written in sass

// --------------------------------------------------------
// Developer - James Humphreys
// Developer URL - https://binaryjim.co.uk
// --------------------------------------------------------

// --------------------------------------------------------
// Resets
// --------------------------------------------------------

// iOS resets
@import "resets/ios-style-resets";

// --------------------------------------------------------
// Plugin Styles (remove those you dont require)
// --------------------------------------------------------

// Flickity
// @import "node_modules/flickity/css/flickity";
@import "flickity/dist/flickity";

// --------------------------------------------------------
// Settings
// --------------------------------------------------------

// Fonts
@import "settings/fonts";
@import "settings/icons";

// Custom Foundation settings
@import "settings/foundation-settings";

// --------------------------------------------------------
// Foundation framework
// --------------------------------------------------------

// Import Base Foundation Framework (required)
@import "foundation-sites/scss/foundation";

// Import all components
// @include foundation-everything();

// Or selectively include components (comment out above)

// Import selected components
@include foundation-global-styles;
@include foundation-xy-grid-classes;
// @include foundation-grid; (for float grid)
// @include foundation-flex-grid; (for legacy flex grid)
@include foundation-flex-classes;
@include foundation-typography;
@include foundation-forms;
@include foundation-button;
// @include foundation-accordion;
@include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
@include foundation-callout;
// @include foundation-card;
// @include foundation-close-button;
@include foundation-menu;
// @include foundation-menu-icon;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-responsive-embed;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
@include foundation-switch;
@include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;
@include foundation-visibility-classes;
// @include foundation-float-classes; (for float grid)

// --------------------------------------------------------
// Custom mixins and components
// --------------------------------------------------------

// Mixins
@import
	"mixins/helper-mixins";

// Components
@import
	"components/grid",
	"components/intro-block",
	"components/branding",
	"components/buttons",
	"components/cta-block",
	"components/cookie-notice",
	"components/footer",
	"components/forms",
	"components/hamburger",
	"components/responsive-navigation",
	"components/typography",
	"components/sections",
	"components/sliders",
	"components/aside-container",
	"components/aside-nav",
	"components/project-thumbnail",
	"components/post-preview",
	"components/article-meta",
	"components/table",
	"components/monokai-syntax",
	"components/algolia-search",
	"components/cost-calculator";

// --------------------------------------------------------
// Layout styles
// --------------------------------------------------------

@import
	"layouts/homepage",
	"layouts/services",
	"layouts/portfolio-root",
	"layouts/blog-root",
	"layouts/contact";

/* That's all folks! */
2

Don’t know the reason but if you rename your flickity.css to flickity.scss it will work. I have the same and wrote a small bash script for importing and renaming a css file.

Hope this helps.

3

I’m not sure if it’s correct that you don’t need to include the .css file extension when importing a CSS file in Sass.

The Sass doc says (bold added):

@import takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few circumstances under which it will compile to a CSS @import rule:

  • If the file’s extension is .css .
  • If the filename begins with http:// .
  • If the filename is a url() .
  • If the @import has any media queries.

If none of the above conditions are met and the extension is .scss or .sass , then the named Sass or SCSS file will be imported. If there is no extension, Sass will try to find a file with that name and the .scss or .sass extension and import it.

4

See https://github.com/gohugoio/hugo/issues/5435

I think this feature was accidently removed from LibSASS, but that is now reverted. I will try to get the new LibSASS into the next Hugo.

5

I thought that was the case, thanks.