Как сделать webpack, sass и исходные карты идти в многостраничном приложении?

Вот где я теперь:Как сделать webpack, sass и исходные карты идти в многостраничном приложении?

package.json:

{ 
    "dependencies": { 
    "css-loader": "^0.26.0", 
    "html-webpack-plugin": "^2.24.1", 
    "node-sass": "^3.13.0", 
    "sass-loader": "^4.0.2", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.3" 
    } 
}

webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: './1.js', 
    output: { 
     path: 'dist', 
     filename: 'bundle.js', 
    }, 
    module: { 
     loaders: [ 
      {test: /\.sass$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}, 
     ] 
    }, 
    plugins: [ 
     new HtmlWebpackPlugin, 
    ], 
};

1.js:

require('./1.sass');

1.sass:

body 
    background: #ddd

Тогда

$ rm -f dist/* && ./node_modules/.bin/webpack

И в Chrome открытым http://example.com/dist. Затем откройте Developer Tools>Sources>top>webpack://>.>1.sass. И там вы увидите код css, а не код sass. devtool для js/coffeescript/что угодно, если угодно. Что я делаю не так?

UPD

Из того, что я могу видеть, sass-loader проходит файл as a string. И in that casenode-sass (libsass) не возвращает исходную карту. Но даже если данный файл, последний возвращает исходную карту сгенерированным css code, по какой-то причине не скомпрометирует код. Любые обходные пути приветствуются, даже если уродливые.

источник

2016-11-20 x-yuri

Попробуйте 'devtool: 'source-map'' и sourceMap запрос на sass loader тоже:' loaders: [' style ',' css? SourceMap ',' sass? SourceMap '] ' –

@ jali-ai [Это] (https://github.com/jtangelder/sass-loader/blob/d894345/index.js#L289), как вы передаете карту следующему загрузчику, но 'css-loader' [не проходит] (https://github.com/webpack/css-loader/blob/5651d70/lib/loader.js#L116-L122). Исходные карты Css не зависят от js. Что касается параметра 'sourceMap', после просмотра кода' sass-loader' параметр 'sourceMap' действительно что-то делает, но он все равно не работает. И да, я проверил это с вашей коррекцией. Безрезультатно :(Если было какое-то обходное решение, даже если уродливое ... –

Фактически он сопоставляется с эквивалентным 'scss' кодом файла' sass'. Таким образом, он работает в некотором роде, но не совсем так, как вы Если вы используете переменную или что-то другое между css и scss, вы можете это увидеть. –

Ну, проблема с libsass не создает исходные карты для встроенного контента, кажется taken care of. Просто libsass возвращает исходные карты с scss code, даже если данный код sass. Поэтому я принял его за css.

источник

2016-11-21 13:37:10

Как сделать webpack, sass и исходные карты идти в многостраничном приложении?

ответ

Смежные вопросы