Как использовать webpack с extract-text-webpack-plugin для компиляции файлов scss в css
Я создал проект angular2 с компонентами angular material2. Теперь я хочу настроить мою тему, чтобы я использовал webpack
модуль, поскольку это создаст один файл из всех файлов scss, поэтому я использовал extract-text-webpack-plugin
создавать отдельные файлы.
Вот мой webpack.config.js
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// multiple extract instances
let extractCSS = new ExtractTextPlugin('[name].css');
module.exports = {
entry: [
'/src/assets/theme/'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'index.js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) }
]
},
plugins: [
extractCSS
]
}
И вот сценарий в моем package.json
"build:css": "webpack --config webpack.config.js"
и команда для запуска
npm run build:css
но это показывает
> webpack --config webpack.config.js
Hash: a5e945c400552ce5350f
Version: webpack 3.3.0
Time: 68ms
Asset Size Chunks Chunk Names
index.js 2.6 kB 0 [emitted] main
[0] multi /src/assets/theme/ 28 bytes {0} [built]
ERROR in multi /src/assets/theme/
Module not found: Error: Can't resolve '/src/assets/theme/' in 'D:\Workspace\WebAdmin_Blade_Template_Material2\webapp'
@ multi /src/assets/theme/
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:css"
npm ERR! node v6.9.5
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! webapp@1.0.0 build:css: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webapp@1.0.0 build:css script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webapp
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
Проблема с entry
, но не в состоянии решить это? в чем проблема? Я что-то пропустил?
отредактированный
Мне не хватало index.js в src/assets/theme/. Вот содержимое этого файла
require('./theme.scss');
require('./custom.scss');
и установлен css-loader
а также sass-loader
,
Чтобы эта работа изменилась
loaders: [
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) }
]
вместо CSS и sass для css-загрузчика и sass-загрузчика.
проблема в том, что он создает один файл из всех файлов sccss в файле /dist/main.css. Как я могу создать индивидуальные файлы для каждого файла scss?