Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add resolve options for imports from css files. #474

Merged
merged 6 commits into from Mar 29, 2019
Merged

Add resolve options for imports from css files. #474

Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b54ec7b
Specify resolve option to be used with the sass-loader. This allows @…
Dec 20, 2018
0f9657f
Specify resolve option to be used with the css-loader. This allows @i…
Dec 20, 2018
b9e42be
Add functional test for sass imports via package.json sass property
Jan 7, 2019
382bc5f
Add functional test for css imports via package.json style property
Jan 7, 2019
9525e7a
Merge branch 'master' into resolve
weaverryan Mar 29, 2019
7895f63
fixing CS
weaverryan Mar 29, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 8 additions & 0 deletions lib/config-generator.js
View file
Open in desktop
Expand Up @@ -227,6 +227,10 @@ class ConfigGenerator {
use: babelLoaderUtil.getLoaders(this.webpackConfig)
},
{
resolve: {
mainFields: ['style', 'main'],
extensions: ['.css'],
},
test: /\.css$/,
use: cssExtractLoaderUtil.prependLoaders(this.webpackConfig, cssLoaderUtil.getLoaders(this.webpackConfig))
}
Expand Down Expand Up @@ -290,6 +294,10 @@ class ConfigGenerator {

if (this.webpackConfig.useSassLoader) {
rules.push({
resolve: {
mainFields: ['sass', 'style', 'main'],
extensions: ['.scss', '.sass', '.css']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What exactly does this do in the process? I know what resolve.extensions does at the root level - it allows you to omit the file extension. But what about here? If I say import 'foo-bar' where foo-bar is a module, what is the purpose of the extensions?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The resolve.extensions value overrides the value at the root level. When you say @import 'foo-bar' Webpack will first check for an alias called foo-bar. If it does not find an alias for foo-bar it will check each directory specified in resolve.modules for a directory called foo-bar. Assuming it finds that directory, it will then look to see if there is a package.json file for the module. If there is, it will use the resolve.mainFields setting to determine which file to import. If there is not then it will use the resolve.mainFiles in conjunction with resolve.extentions to determine what file to look for in that directory.

If you were to say @import './foo-bar' then Webpack would look in the current directory for a file named foo-bar with an extension of .scss, .sass, or .css in that order.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One more question: because this is being added to the sass loader, this resolution logic applies to files being imported from within a Sass file only, right? So, for example, if I were in foo.css (the earlier import), ./foo-barwould look forfoo-bar.cssbut notfoo-bar.scss` (because that rule only lives down here).

What about less & stylus below? Do those also need these options?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, these are loader specific options. So @import "./foo-bar" in foo.css would only look for ./foo-bar.css and not foo-bar.scss.

These options can be specified for any loaders where appropriate so long as that loader uses Webpack to perform the import resolution.

},
test: /\.s[ac]ss$/,
use: cssExtractLoaderUtil.prependLoaders(this.webpackConfig, sassLoaderUtil.getLoaders(this.webpackConfig))
});
Expand Down