функция импорта URL в S CSS без установки стилей - PullRequest
Новая
       27

функция импорта URL в S CSS без установки стилей

0 голосов
/ 14 июля 2020

Я не могу загрузить свою основную таблицу стилей s css, используя @import(url). Моя таблица стилей находится в CDN.

Вот содержимое моей таблицы стилей, размещенной на моем CDN: 

@import "~simplebar/dist/simplebar.css";
@import "~highlight.js/styles/androidstudio.css";
@import "~@fortawesome/fontawesome-free/css/all.min.css";
@import "./@vex/styles/core";


$primary: rgb(93, 92, 100);
$secondary: #dc1e35;
$maroon: #961e36;

:root {
  --font: "Open Sans";
  --sidenav-background: #5d5c64;
  --sidenav-color: white;
  --sidenav-item-color: #ffffff;
  --sidenav-toolbar-background: #5d5c64;
  --sidenav-item-color-active: #{$light-primary-text};
}

В моем проекте я импортирую файл в свой styles.scss как это:

@import url(https://mycdn.com);

Ни одна из переменных не была установлена, ни стили.

  • Все зависимости существуют в проекте.
  • Ссылка CDN работает
  • Ошибок в консоли нет

Думаю, это может быть связано с тем, как препроцессор загружает переменные и импортирует.

Вот мой файл конфигурации webpack: 

const path = require('path');

let sassImplementation;
try {
  sassImplementation = require('node-sass');
} catch {
  sassImplementation = require('sass');
}

module.exports = {
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              syntax: 'postcss-scss',
              plugins: () => [
                require('tailwindcss')
              ]
            }
          },
          {
            loader:  "resolve-url-loader",
            options:{
              keepQuery: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              implementation: sassImplementation,
              sourceMap: false,
              sassOptions: {
                precision: 8
              }
            }
          }
        ]
      }
    ]
  }
};

Любая помощь будет принята с благодарностью!

...