Импортировать файл scss из файла css с помощью webpack
В моем проекте мне нужно объединить таблицы стилей, написанные на двух разных языках препроцессора (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
Проблема не в этом - если вы внимательно посмотрите на сообщение об ошибке, вы увидите, что css-loader считает, что цепочка загрузчиков - это нормальный путь. Из-за этого написано Can't resolve './sass'
вы использовали css-loader с файлами .sass? вам нужно использовать sass-loader
Я являюсь использую sass-loader, моя проблема в том, что мне также нужно скомпилировать файл стилуса, и, по-видимому, ни css-loader, ни sass-loader не могут использовать дерево модулей webpack для компиляции их импорта.
есть еще stylus-loader: github.com/shama/stylus-loader
Это обсуждение сорвалось, пожалуйста, прочтите мой исходный вопрос, должно быть очень ясно, что я не задал вопроса о том, какие загрузчики я должен использовать для компиляции файлов SCSS и Stylus.
Ответы 1
Поскольку ни один из css-loader, sass-loader или style-loader не может загружать файлы на других языках (что, я думаю, должно быть возможно с помощью строки цепочки загрузчика, такой как sass-loader!my-file.scss), я вместо этого импортировал стили в свой индексный файл javascript и использовал плагин извлечения текста. Это нормально работает.
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"
вы получаете ошибку
file not found. вам просто нужно убедиться, что вы ссылаетесь на правильный путь в webpack / @import. вы также можете посмотреть этот ответ: stackoverflow.com/questions/7111610/…