Add resolve options for imports from css files.

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';

fixtures/css/style_package_import.css

@@ -0,0 +1 @@
+@import '~lib/test-pkg';

fixtures/lib/test-pkg/css/sass_entry.scss

@@ -0,0 +1,5 @@
+$content:'Sass entrypoint';
+
+body {
+    content:$content;
+}

fixtures/lib/test-pkg/css/style_entry.css

@@ -0,0 +1,3 @@
+body {
+    content:'Style entrypoint';
+}

fixtures/lib/test-pkg/js/javascript_entry.js

@@ -0,0 +1,3 @@
+"use strict";
+
+document.write("JavaScript entrypoint");

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"
+}

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))
             }
@@ -290,6 +294,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))
             });

test/functional.js

@@ -1972,5 +1972,42 @@ 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();
+                })
+            });
+        });
     });
 });