Skip to content

Commit

Permalink
Fix importing css files from sass/scss
Browse files Browse the repository at this point in the history
  • Loading branch information
jorrit committed Jul 5, 2015
1 parent 5dbfd5f commit 8342404
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 4 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
Changelog
---------

### ????

- Fix importing css files from scss/sass

### 1.0.2

- Fix a bug where files could not be imported across language styles [#73](https://github.com/jtangelder/sass-loader/issues/73)
Expand Down
2 changes: 1 addition & 1 deletion index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = function (content) {
var isSync = typeof callback !== 'function';
var self = this;
var resourcePath = this.resourcePath;
var extensionMatcher = /\.(sass|scss)$/;
var extensionMatcher = /\.(sass|scss|css)$/;
var fileExt;
var opt;
var contextMatch;
Expand Down
7 changes: 4 additions & 3 deletions test/prepare.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,13 @@ var path = require('path');

var error = 'error';
var filesWithTildeImports = [
'imports', 'underscore-imports'
'imports', 'underscore-imports', 'import-other-style'
];

['scss', 'sass'].forEach(function (ext) {
var files = [];
var basePath = path.join(__dirname, ext);
var nodeModulesPath = path.join(__dirname, 'node_modules') + '/';

fs.readdirSync(path.join(__dirname, ext))
.filter(function (file) {
Expand All @@ -27,7 +28,7 @@ var filesWithTildeImports = [
// We need to replace all occurrences of '~' with relative paths
// so node-sass finds the imported files without webpack's resolving algorithm
fileContent = fs.readFileSync(fileName, 'utf8');
fileContent = fileContent.replace('~', '../node_modules/');
fileContent = fileContent.replace('~', nodeModulesPath);
fs.writeFileSync(fileName, fileContent, 'utf8');
}

Expand All @@ -43,7 +44,7 @@ var filesWithTildeImports = [
if (filesWithTildeImports.indexOf(fileWithoutExt) > -1) {
// Revert back our changes and add '~' again
fileContent = fs.readFileSync(fileName, 'utf8');
fileContent = fileContent.replace('../node_modules/', '~');
fileContent = fileContent.replace(nodeModulesPath, '~');
fs.writeFileSync(fileName, fileContent, 'utf8');
}

Expand Down
1 change: 1 addition & 0 deletions test/sass/import-other-style.sass
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
// Importing the other language style requires the file extension to be set explicitly
@import ../scss/another/module.scss
@import ~some-module.css
1 change: 1 addition & 0 deletions test/scss/import-other-style.scss
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
// Importing the other language style requires the file extension to be set explicitly
@import "../sass/another/module.sass";
@import "~some-module.css";

4 comments on commit 8342404

@jsg2021
Copy link

Choose a reason for hiding this comment

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

What about testing css files that are not in a module? sibling to the sass directory?

@jorrit
Copy link
Owner Author

@jorrit jorrit commented on 8342404 Jul 23, 2015

Choose a reason for hiding this comment

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

Can you add a test like that as a PR?

@jsg2021
Copy link

Choose a reason for hiding this comment

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

I locally made some tests, but it made me realize that @import "some.css" is treated differently than other SASS imports. ...its result is not the content of the file but rather a link to it: @import url(some.css);

Unfortunately thats thats SASS. So not really a "bug". So i'm not going to push my tests.

@jorrit
Copy link
Owner Author

@jorrit jorrit commented on 8342404 Jul 29, 2015

Choose a reason for hiding this comment

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

I think css should be inlined like scss/sass, but maybe @jhnns knows this for sure.

Please sign in to comment.