Понимание загрузчика и путей к файлу Webpack SASS

У меня возникли проблемы, чтобы понять, как работает разрешение пути к файлу. Я использую как загрузчики CSS, так и SASS стандартным способом:Понимание загрузчика и путей к файлу Webpack SASS

var ExtractTextPlugin = require ('extract-text-webpack-plugin');

module: { 
    loaders: [ 
     { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') } 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin('build/[name].min.css', { 
     allChunks: true 
    }) 
]

Итак, я надеюсь, вся моя SASS быть скомпилирована и визуализацией в build/app.min.css файле. Это работает хорошо. Кроме того, у меня возникли проблемы с загрузкой шрифтов и их включением.

Рассмотрим я работаю на /src/sass/style.scss файл, и я хочу, чтобы включить шрифт-удивительный файл SASS следующим образом:

@import '~font-awesome/scss/font-awesome.scss';

Это не работает. Тем не менее, если я использую относительный путь, такой как:

@import '../../node_modules/font-awesome/scss/font-awesome.scss';

Это работает.

Тогда, я хочу, чтобы изменить путь шрифта, удивительным, чтобы соответствовать правильной папке:

$fa-font-path: '~font-awesome/fonts';

Он также работает. Это кажется мне логичным, поскольку, насколько я понял концепцию, ~ относится к папке node_modules.

Итак, почему он работает с контуром шрифта, а не с импортом SASS? Я также хотел бы использовать нотацию ~, так как это файл, используемый несколькими проектами, некоторые из которых требуют ../../../node_modules.

Благодарим за помощь! :)

источник

2016-09-13 Jonathan Petitcolas

Привет, Джонатан, вы нашли решение? Кажется, что sass определяет параметр: load_paths (http://sass-lang.com/documentation/file.SASS_REFERENCE.html#load_paths-option), но я не мог понять, как его использовать с расширительным плагином. – Sam

Собственно, параметры, кажется, включают includePaths из узла-sass (https://github.com/sass/node-sass). Поэтому кажется, что мы можем использовать его с расширением plugin следующим образом: {loader: «sass-loader», query: { includePaths: [srcDir], }} – Sam

Вау, вы пишете статью, которая облегчила мне жизнь в Webpack, и я имею честь помочь вам взамен.

Я думаю, проблема здесь в том, что первый аргумент, используемый с ExtractTextPlugin, не должен указывать путь к файлу, а только местоположение файла.

Итак, вы можете попробовать изменить это только на [name].min.css и указать местоположение вывода в другом месте.

источник

2016-12-14 21:56:05

Понимание загрузчика и путей к файлу Webpack SASS

ответ

Смежные вопросы