Skip to content

Request: please add 'css' Less 'Import Option' to font imports  #55

Description

@lfurzewaddock

Webpack 4 builds failed which included Semantic-UI less files that featured a web font:

Can't resolve './https://fonts.googleapis.com/css?family=Roboto' in '/MY_PROJECT_DIR/node_modules/semantic-ui-less/themes/material/elements'

The following comment on another repo answered my problem; Import url tries to resolve directory #67

To assist Webpack to load Semantic-UI less files, which include web fonts downloaded from a CDN such as Google, please add Less Import Option css.

For example; themes/material/elements/button.overrides would change from;

@import url(https://fonts.googleapis.com/css?family=Roboto);

.ui.primary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
  ;
}

.ui.secondary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
  ;
}

to;

@import (css) url(https://fonts.googleapis.com/css?family=Roboto);

.ui.primary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.3) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.35) !important
  ;
}

.ui.secondary.button:hover {
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset,
    0px 2px 3px 0px rgba(0, 0, 0, 0.3) !important
  ;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions