Sass ładowarka nie działa w WebPacka

Question

Próbuję uzyskać pliki * .scss być obsługiwane w mojej konfiguracji WebPACK ale wciąż otrzymuję następujący błąd podczas uruchamiania polecenia WebPack produkcji:

ERROR in ./~/css-loader!./~/sass-loader!./app/styles.scss 
Module build failed: TypeError: Cannot read property 'sections' of null 
at new SourceMapConsumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/node_modules/source-map/lib/source-map/source-map-consumer.js:23:21) 
at PreviousMap.consumer (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/previous-map.js:37:34) 
at new Input (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/input.js:42:28) 
at parse (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/parse.js:17:17) 
at new LazyResult (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/lazy-result.js:54:47) 
at Processor.process (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/node_modules/postcss/lib/processor.js:30:16) 
at processCss (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/processCss.js:168:24) 
at Object.module.exports (/Users/sean/Development/playground/webpack.sass.test/node_modules/css-loader/lib/loader.js:21:15) 
@ ./app/styles.scss 4:14-117 

mogę” t dla życia mnie zrozumieć dlaczego. To bardzo prosta konfiguracja.

Stworzyłem udział skrzynki referencyjnej z minimalnym ilustrując w ten sposób: https://www.dropbox.com/s/quobq29ngr38mhx/webpack.sass.test.zip?dl=0

Rozpakuj ten następnie uruchomić:

npm install 
webpack 

Oto mój plik webpack.config.js:

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    './app' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'index.js', 
    publicPath: '/dist/' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.scss$/, 
     loader: 'style-loader!css-loader!sass-loader' 
    }] 
    } 
} 

Plik indeksu.js:

require('./styles.scss'); 

alert('foo bar baz'); 

a plik styles.scss:

body { 
    background-color: #000; 
} 

Wydaje się przestrzegać zaleceń stronie dokumentacji Sass-loader, ale nie mogę go uruchomić.

:(

Informacja o moim otoczeniu:

node - 0.12.4 
npm - 2.10.1 
os - OS X Yosemite 

Answer 1

Udało mi się uzyskać inne obejście problemu, które nie wymaga edytowania bibliotek programu css-loader w moim katalogu npm_modules (zgodnie z odpowiedzią @ chriserik).

Jeśli dodasz "? SourceMap" do programu ładującego sas, program ładujący css wydaje się obsługiwać dane wyjściowe.

Oto moja konfiguracja aktualizowane:

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    './app' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'index.js', 
    publicPath: '/dist/' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.scss$/, 
     loader: 'style!css!sass?sourceMap' 
    }] 
    } 
} 

PS: Nawet rozszerzyłem ten test, żeby uwzględnić kompas-mixiny, i to też zadziałało.

Answer 2

po ten sam problem, znalazłem to: https://github.com/webpack/css-loader/issues/84

Wydaje się, że rozwiązaniem jest teraz ręcznie zmodyfikować linie 17- 19 of /node_modules/css-loader/lib/loader.js z

if(map && typeof map !== "string") { 
    map = JSON.stringify(map); 
} 

Naprawiło to problem dla mnie.

Answer 3

Problem można rozwiązać, ustawiając opcję source-map na wartość true (jak widać w innych odpowiedziach).

Ale w przypadku znalezienia opcji niechcianego przejścia w ciągu zapytania istnieje alternatywa;

do konfiguracji programu ładującego Sass można utworzyć właściwość sassLoader w obiekcie WebPack config:

module.exports = { 
    devtool: 'eval', 
    entry: [ 
    './app' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'index.js', 
    publicPath: '/dist/' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin() 
    ], 
    resolve: { 
    extensions: ['', '.js'] 
    }, 
    module: { 
    loaders: [{ 
     test: /\.scss$/, 
     loader: 'style!css!sass' 
     // loader: ExtractPlugin.extract('style', 'css!sass'), 
    }] 
    }, 
    sassLoader: { 
    sourceMap: true 
    }, 
}