diff --git a/fixtures/css/sass_package_import.scss b/fixtures/css/sass_package_import.scss new file mode 100644 index 00000000..905a0773 --- /dev/null +++ b/fixtures/css/sass_package_import.scss @@ -0,0 +1,7 @@ +// There seems to be an issue with the sass-loader and prefixing +// aliased directories with a tilde. The following line is how +// this import should look and works for node_modules. +// @import '~lib/test-pkg'; + +// Importing without the tilde seems to work for webpack aliases +@import 'lib/test-pkg'; \ No newline at end of file diff --git a/fixtures/css/style_package_import.css b/fixtures/css/style_package_import.css new file mode 100644 index 00000000..54d00e13 --- /dev/null +++ b/fixtures/css/style_package_import.css @@ -0,0 +1 @@ +@import '~lib/test-pkg'; \ No newline at end of file diff --git a/fixtures/lib/test-pkg/css/sass_entry.scss b/fixtures/lib/test-pkg/css/sass_entry.scss new file mode 100644 index 00000000..a568ef29 --- /dev/null +++ b/fixtures/lib/test-pkg/css/sass_entry.scss @@ -0,0 +1,5 @@ +$content:'Sass entrypoint'; + +body { + content:$content; +} \ No newline at end of file diff --git a/fixtures/lib/test-pkg/css/style_entry.css b/fixtures/lib/test-pkg/css/style_entry.css new file mode 100644 index 00000000..584ed60d --- /dev/null +++ b/fixtures/lib/test-pkg/css/style_entry.css @@ -0,0 +1,3 @@ +body { + content:'Style entrypoint'; +} \ No newline at end of file diff --git a/fixtures/lib/test-pkg/js/javascript_entry.js b/fixtures/lib/test-pkg/js/javascript_entry.js new file mode 100644 index 00000000..3a4505d8 --- /dev/null +++ b/fixtures/lib/test-pkg/js/javascript_entry.js @@ -0,0 +1,3 @@ +"use strict"; + +document.write("JavaScript entrypoint"); \ No newline at end of file diff --git a/fixtures/lib/test-pkg/package.json b/fixtures/lib/test-pkg/package.json new file mode 100644 index 00000000..50fc4cda --- /dev/null +++ b/fixtures/lib/test-pkg/package.json @@ -0,0 +1,11 @@ +{ + "name":"@symfony/webpack-encore-test-pkg", + "description": "This is a test package for use by functional tests which use packages.", + "author": { + "name": "David Ellingsworth", + "email": "david@desource.org" + }, + "main":"js/javascript_entry.js", + "style":"css/style_entry.css", + "sass":"css/sass_entry.scss" +} \ No newline at end of file diff --git a/lib/config-generator.js b/lib/config-generator.js index 443e7242..64ec9127 100644 --- a/lib/config-generator.js +++ b/lib/config-generator.js @@ -234,6 +234,10 @@ class ConfigGenerator { use: babelLoaderUtil.getLoaders(this.webpackConfig) }), applyRuleConfigurationCallback('css', { + resolve: { + mainFields: ['style', 'main'], + extensions: ['.css'], + }, test: /\.css$/, oneOf: [ { @@ -311,6 +315,10 @@ class ConfigGenerator { if (this.webpackConfig.useSassLoader) { rules.push(applyRuleConfigurationCallback('sass', { + resolve: { + mainFields: ['sass', 'style', 'main'], + extensions: ['.scss', '.sass', '.css'] + }, test: /\.s[ac]ss$/, oneOf: [ { diff --git a/test/functional.js b/test/functional.js index 2e4a46d5..e7833ad0 100644 --- a/test/functional.js +++ b/test/functional.js @@ -2214,6 +2214,43 @@ module.exports = { }); }); + describe('Package entrypoint imports', () => { + it('Import via "sass" package property', (done) => { + const config = createWebpackConfig('web/build', 'dev'); + + config.setPublicPath('/build'); + config.addAliases({ + lib: path.resolve('./lib') + }); + config.enableSassLoader(); + config.addStyleEntry('sass', './css/sass_package_import.scss'); + + testSetup.runWebpack(config, () => { + // A successful compile is all that is needed to pass this test. + // If this test fails then the import in the above sass file + // is not loading the package's sass file. + done(); + }); + }); + + it('Import via "style" package property', (done) => { + const config = createWebpackConfig('web/build', 'dev'); + + config.setPublicPath('/build'); + config.addAliases({ + lib: path.resolve('./lib') + }); + config.addStyleEntry('style', './css/style_package_import.css'); + + testSetup.runWebpack(config, () => { + // A successful compile is all that is needed to pass this test. + // If this test fails then the import in the above css file + // is not loading the package's style file. + done(); + }); + }); + }); + describe('CSS extraction', () => { it('With CSS extraction enabled', (done) => { const config = createWebpackConfig('build', 'dev');