了解Webpack SASS加载器和文件路径

Question

I got some troubles to understand how the file path resolution works. I am using both CSS and SASS loaders in a standard way:

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
    })
]

So, I expect all my SASS to be compiled and render in build/app.min.css file. It works well. Except I got issues with fonts loading and includes.

Let's consider I work on a /src/sass/style.scss file, and I want to include the font-awesome SASS file as following:

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

It doesn't work. Yet, if I use a relative path such as:

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

It works.

Then, I want to change the font-awesome font path to match correct folder:

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

It also works. Which seems logical to me, as, as far as I understood the concept, the ~ refers to the node_modules folder.

So, why does it work with the font path and not with the SASS import? I would like to use ~ notation too, as this is a file used by several projects, some of them requiring a ../../../node_modules .

Thanks for your help! :)

Answer 1

wow, you write the article that made my life much easier on Webpack, and I have the privilege of helping you out in return.

I think the issue here is that the first argument being used with ExtractTextPlugin isn't supposed to specify the file path, just the file location.

So you can try changing that to just [name].min.css and specify the output location elsewhere.