импортировать файл scss из файла css с помощью веб-пакета

В моем проекте мне нужно объединить таблицы стилей, написанные на двух разных языках препроцессора (SASS и Stylus), в один файл css.

Мой наивный подход заключался в том, чтобы просто добавить stylus-loader с проверкой расширения .styl в мою конфигурацию веб-пакета и @import файл стилуса из моего файла app.scss (который является точкой входа).

Кажется, что sass-loader не разрешает модули, как это происходит в JavaScript. Я также попытался создать файл CSS точки входа с моим app.scss и файлом Stylus в качестве импорта, что также не работает.

Это просто конфигурация, которую мне не хватает, или css-loader и sass-loader просто не поддерживают такое разрешение модуля?

Входной CSS

@import "sass-loader!./app.scss";
@import "stylus-loader!../node_modules/vuetify/src/stylus/main.styl

Это просто приведет к этой ошибке:

ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './sass' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
 @ ./node_modules/css-loader??ref--6-1!./css/app.css 3:10-95

ERROR in ./node_modules/css-loader??ref--6-1!./css/app.css
Module not found: Error: Can't resolve './stylus' in '/Users/tux/projects/zenner/platform-base/platform/assets/css'
 @ ./node_modules/css-loader??ref--6-1!./css/app.css 4:10-131

webpack css sass stylus
person narrowtux    schedule 18.04.2018    source источник
comment
вы получаете file not found ошибку. вам просто нужно убедиться, что вы указываете правильный путь в файле webpack / @import. вы также можете посмотреть на этот ответ: stackoverflow.com/questions/7111610/   -  person King Reload    schedule 18.04.2018
comment
Проблема не в этом — если вы внимательно посмотрите на сообщение об ошибке, вы увидите, что css-loader считает, что цепочка загрузчика — это нормальный путь. Из-за этого он говорит Can't resolve './sass'   -  person narrowtux    schedule 18.04.2018
comment
вы использовали css-loader для .sass файлов? вам нужно использовать sass-loader   -  person King Reload    schedule 18.04.2018
comment
Я я использую sass-loader, моя проблема в том, что мне нужно также скомпилировать файл стилуса, и, по-видимому, ни css-loader, ни sass-loader не могут использовать дерево модулей webpack для компиляции своего импорта.   -  person narrowtux    schedule 18.04.2018
comment
есть также stylus-loader: github.com/shama/stylus-loader   -  person King Reload    schedule 18.04.2018
comment
Это обсуждение сошло с рельсов, пожалуйста, прочитайте мой первоначальный вопрос, должно быть совершенно ясно, что я пропустил вопрос о том, какие загрузчики я должен использовать для компиляции файлов SCSS и Stylus.   -  person narrowtux    schedule 18.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку ни один из css-loader, sass-loader или style-loader не может загружать файлы на других языках (что, как мне кажется, должно быть возможно с такой строкой цепочки загрузчика, как sass-loader!my-file.scss), вместо этого я импортировал стили в свой индексный файл javascript и использовал плагин Extract-Text. Это прекрасно работает.

webpack.config.js 

var ExtractTextPlugin = require("extract-text-webpack-plugin")
const extractCSS = new ExtractTextPlugin('css/styles.css')

  {
    test: /\.scss$/,
    use: extractCSS.extract({use: ["css-loader", "sass-loader"]})
  }, {
    test: /\.styl$/,
    use: extractCSS.extract({use: ["css-loader", 'stylus-loader']})
  }

app.js

import "../css/app.scss"
import "vuetify/src/stylus/main.styl"
person narrowtux    schedule 18.04.2018