From b54ec7b267cb3d7573aaf19958b514e5569ae9f9 Mon Sep 17 00:00:00 2001 From: David Ellingsworth Date: Thu, 20 Dec 2018 15:32:55 -0500 Subject: [PATCH 1/5] Specify resolve option to be used with the sass-loader. This allows @import in sass files to locate a file to import based on the package.json file and to look for local files with the appropriate extentions when not specified. --- lib/config-generator.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/config-generator.js b/lib/config-generator.js index 09400d9e..d88b0488 100644 --- a/lib/config-generator.js +++ b/lib/config-generator.js @@ -290,6 +290,10 @@ class ConfigGenerator { if (this.webpackConfig.useSassLoader) { rules.push({ + resolve: { + mainFields: ['sass', 'style', 'main'], + extensions: ['.scss', '.sass', '.css'] + }, test: /\.s[ac]ss$/, use: cssExtractLoaderUtil.prependLoaders(this.webpackConfig, sassLoaderUtil.getLoaders(this.webpackConfig)) }); From 0f9657ff3765ec7fd13c327c7264cfea01ac3575 Mon Sep 17 00:00:00 2001 From: David Ellingsworth Date: Thu, 20 Dec 2018 15:39:58 -0500 Subject: [PATCH 2/5] Specify resolve option to be used with the css-loader. This allows @import in css files to locate a file to import based on the package.json file and to look for local files with the appropriate extensions when not specified. --- lib/config-generator.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/config-generator.js b/lib/config-generator.js index d88b0488..6ecc2389 100644 --- a/lib/config-generator.js +++ b/lib/config-generator.js @@ -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)) } From b9e42be8d26db796bd7ef557e77b8506be9615f0 Mon Sep 17 00:00:00 2001 From: David Ellingsworth Date: Mon, 7 Jan 2019 14:11:12 -0500 Subject: [PATCH 3/5] Add functional test for sass imports via package.json sass property --- fixtures/css/sass_package_import.scss | 7 +++++++ fixtures/lib/test-pkg/css/sass_entry.scss | 5 +++++ fixtures/lib/test-pkg/js/javascript_entry.js | 3 +++ fixtures/lib/test-pkg/package.json | 10 ++++++++++ test/functional.js | 17 +++++++++++++++++ 5 files changed, 42 insertions(+) create mode 100644 fixtures/css/sass_package_import.scss create mode 100644 fixtures/lib/test-pkg/css/sass_entry.scss create mode 100644 fixtures/lib/test-pkg/js/javascript_entry.js create mode 100644 fixtures/lib/test-pkg/package.json 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/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/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..12bc97f4 --- /dev/null +++ b/fixtures/lib/test-pkg/package.json @@ -0,0 +1,10 @@ +{ + "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", + "sass":"css/sass_entry.scss" +} \ No newline at end of file diff --git a/test/functional.js b/test/functional.js index bd3ad9a8..3707599c 100644 --- a/test/functional.js +++ b/test/functional.js @@ -1972,5 +1972,22 @@ 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, () => { + done(); + }) + }); + }); }); }); From 382bc5f112bebca0e26763593fe059aa75dc5d3f Mon Sep 17 00:00:00 2001 From: David Ellingsworth Date: Mon, 7 Jan 2019 14:13:03 -0500 Subject: [PATCH 4/5] Add functional test for css imports via package.json style property --- fixtures/css/style_package_import.css | 1 + fixtures/lib/test-pkg/css/style_entry.css | 3 +++ fixtures/lib/test-pkg/package.json | 1 + test/functional.js | 20 ++++++++++++++++++++ 4 files changed, 25 insertions(+) create mode 100644 fixtures/css/style_package_import.css create mode 100644 fixtures/lib/test-pkg/css/style_entry.css 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/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/package.json b/fixtures/lib/test-pkg/package.json index 12bc97f4..50fc4cda 100644 --- a/fixtures/lib/test-pkg/package.json +++ b/fixtures/lib/test-pkg/package.json @@ -6,5 +6,6 @@ "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/test/functional.js b/test/functional.js index 3707599c..3f93c21c 100644 --- a/test/functional.js +++ b/test/functional.js @@ -1985,6 +1985,26 @@ module.exports = { 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(); }) }); From 7895f63070e92909b0e1fe5d0105013e53170aef Mon Sep 17 00:00:00 2001 From: Ryan Weaver Date: Fri, 29 Mar 2019 09:01:36 -0400 Subject: [PATCH 5/5] fixing CS --- test/functional.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/test/functional.js b/test/functional.js index 9e7073e7..0ae2caa0 100644 --- a/test/functional.js +++ b/test/functional.js @@ -2211,7 +2211,7 @@ module.exports = { config.setPublicPath('/build'); config.addAliases({ - lib:path.resolve('./lib') + lib: path.resolve('./lib') }); config.enableSassLoader(); config.addStyleEntry('sass', './css/sass_package_import.scss'); @@ -2221,7 +2221,7 @@ module.exports = { // 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) => { @@ -2229,16 +2229,16 @@ module.exports = { config.setPublicPath('/build'); config.addAliases({ - lib:path.resolve('./lib') + 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. + // is not loading the package's style file. done(); - }) + }); }); });