Semantic-UI-LESS Request: please add 'css' Less 'Import Option' to font imports

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

Open lfurzewaddock opened this issue 6 years ago • 5 comments

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
  ;
}