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.

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

[Feature Request] Stylesheet Vendor Imports #1122

Closed
Daeluse opened this issue Oct 23, 2016 · 12 comments
Closed

[Feature Request] Stylesheet Vendor Imports #1122

Daeluse opened this issue Oct 23, 2016 · 12 comments

Comments

@Daeluse
Copy link

Daeluse commented Oct 23, 2016

  • I'm submitting a ...
    [ ] bug report
    [x] feature request
    [ ] question about the decisions made in the repository
  • Do you want to request a feature or report a bug?
    Feature Request
  • What is the current behavior?
    Import statements in entry points for CSS and SASS are not currently working,
  • What is the expected behavior?
    Adding an Import statement in any of the entry points (IE Vendor) for a SASS (.scss) or a CSS (.css) file should result in that stylesheet being bundled into the global css for the application.
  • What is the motivation / use case for changing the behavior?
    Some modules, such as Bootstrap V4, require stylesheets to be imported into the application to enable certain features, such as the flex grid. There are current workarounds in place, but they are bulky and bloated. This method of importing stylesheets used to work in the original builds of this seed project.*
@Daeluse
Copy link
Author

Daeluse commented Oct 24, 2016

Using the following loaders in the mean time, no guarantee they will work in everyone's case, but they provide the temporary fix until we can get some vetted support for this.

const ExtractTextPlugin = require('extract-text-webpack-plugin');
...
{
  test: /\.scss$/,
  exclude: helpers.root('node_modules'),
  loaders: ['raw-loader', 'sass-loader']
},

{
  test: /\.scss$/,
  include: helpers.root('node_modules'),
  loaders: ["style", "css", "sass"]
},

{
  test: /\.css$/,
  exclude: helpers.root('src', 'app'),
  loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']})
},

{
  test: /\.css$/,
  include: helpers.root('src', 'app'),
  loader: 'raw!postcss'
},
...
plugins: [
  new ExtractTextPlugin('[name].[hash].css'),

@davidalee
Copy link

Any reason why importing css/scss files worked in previous builds but is no longer working in the current build?

@shlomiassaf
Copy link
Contributor

@davidalee Works for me...

Component resources does not work with AOT (styleUrls, templateUrl) since they don't go through the loader chain.

It will be fixed in a short period I believe.

@davidalee
Copy link

@shlomiassaf I'm having issues with importing global styles into the vendor bundle

@shlomiassaf
Copy link
Contributor

shlomiassaf commented Dec 28, 2016 via email

@joshwiens
Copy link
Contributor

See #1304

@davidalee
Copy link

#1304 resolves this issue for me

@joshwiens
Copy link
Contributor

For all those in this thread, the proposed solution is outline in the PR #1304 from @colinskow. If you want a say in how this is implemented, now would be the time to do so. If nobody objects, i'll be landing that by e.o.d

@Daeluse
Copy link
Author

Daeluse commented Dec 28, 2016

#1304 Does not provide the loader for SASS files in test environments. Other than that, the PR takes care of the issue in the current version of the repo.

@colinskow
Copy link
Contributor

Generally Karma doesn't need external stylesheets, and unit tests probably shouldn't be dependent on them. So I purposely left it out of the test config. Tests will launch faster.

@joshwiens
Copy link
Contributor

Unit test definitely shouldn't be dependent on style sheets any more than they should depend on data. @colinskow is correct in his test implementation.

@Daeluse
Copy link
Author

Daeluse commented Dec 28, 2016

Karma will not launch without error unless I add a null loader for SASS in my environment. The purpose is not to incorporate them but to ensure that the file types will be handled appropriately when encountered.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants