Как настроить webpack только для scss(compass)?

Понадобилось мне собирать только sass, с compass и спрайтами. Обычный compass не устраивает т.к. он не умеет import_once, а все решения все равно делают импорт, но не добавляют содержимое. Когда импортов становится много, процесс сборки сильно затягивается. Задумал попробовать для сборки webpack, накидал конфиг, но естественно ничего не получилось, есть 2 вида ошибок:

ERROR in ./scss/stroyka.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

\@import "/img/stroyka/*.png";
^
File to import not found or unreadable: /img/stroyka/*.png.
in ~/scss/pages/_stroyka.scss (line 3, column 1)

и

ERROR in ./scss/calendar.scss 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
> #calendar {
| position: absolute;
| visibility: hidden;


И если с первой более менее понятно что происходит, но непонятно как решать. То что не так со второй совсем не понятно, с чего ему селекторы не нравятся(не только "#", но и ".", и "tag")

Вот мой конфиг:
const path = require('path');
const glob = require('glob');

function toObject(paths) {
	var ret = {};
	paths.forEach(function(p) {
		ret[p.split('/').slice(-1)[0].split('.scss')[0]] = path.resolve(__dirname, p); 
	});
	
	return ret;
}

module.exports = {
	entry: toObject(glob.sync('scss/*.scss')),
	output: {
		path: path.resolve(__dirname, 'css'),
		publicPath: '/css',
		filename: '[name].css'
	},
	module: {
		rules: [{
			test: /\.scss$/,
			use: [
				{
					loader: 'sass-loader',
					options: {
						includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
					},
				}
			]
		}]
	}
}
  • Вопрос задан
  • 283 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы