Как я могу добавить пакет дизайна для загрузки в webpack?

Question

Я пытаюсь добавить дизайн загрузочного материала с помощью webpack, используя также загрузочный загрузчик на основе Sass, но без результатов.

Я могу загрузить его с помощью плагина bower-webpack, но я хочу иметь больше контроля над ним, используя npm, без управления пакетами колонок.

Answer 1

да, вы должны сделать, так как @jkukul сказал (а):

Установить самозагрузки-материал-дизайн: npm install --save bootstrap-material-design Добавить Css загрузчик в свой WebPack конфигурации: module.exports = { module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, ] }, };

также, вы должны установить стиль-погрузчик и Css-погрузчик пакеты

npm install style-loader css-loader --save-dev 

и добавить экстракт текст webpack плагин:

npm i extract-text-webpack-plugin --save 

добавить эту строку перед тем module.exports:

var ExtractTextPlugin = require ('extract-text-webpack-plugin'); 

и добавить этот Param внутри module.exports:

styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader') 

вероятно, может показаться JQuery неопределенной ошибки: Я установил его таким образом

npm i jquery --save 

и добавить плагины внутри module.exports: (! Надеюсь, это будет полезно)

plugins: [ 
    new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery" 
})] 

вот мой общий файл webpack.config:

var path = require('path'); 
 
var webpack = require('webpack'); 
 
var ExtractTextPlugin = require ('extract-text-webpack-plugin'); 
 

 
module.exports = { 
 
    styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'), 
 
    devtool: 'eval', 
 
    entry: [ 
 
    'webpack-dev-server/client?http://localhost:3000', 
 
    'webpack/hot/only-dev-server', 
 
    './src/index' 
 
    ], 
 
    output: { 
 
    path: path.join(__dirname, 'dist'), 
 
    filename: 'bundle.js', 
 
    publicPath: '/static/' 
 
    }, 
 

 
    plugins: [ 
 
    new webpack.HotModuleReplacementPlugin(), 
 
    new webpack.ProvidePlugin({ 
 
     $: "jquery", 
 
     jQuery: "jquery" 
 
    }) 
 

 
    ], 
 
    module: { 
 
    loaders: [{ 
 
     test: /\.js$/, 
 
     loaders: ['react-hot', 'babel'], 
 
     include: path.join(__dirname, 'src') 
 
    }, 
 
    { 
 
     test: /\.css$/, 
 
     loader: "style-loader!css-loader" 
 
    } 
 

 
    ], 
 
    resolve: { 
 
    extensions: ['', '.js', '.jsx','.css'], 
 
    modulesDirectories: ['node_modules'] 
 
    } 
 
    } 
 
};

Answer 2

Попробуйте выполнить следующие шаги.

Установка bootstrap-material-design:

npm install --save bootstrap-material-design 

Добавить Css загрузчик в свой WebPack конфигурации:

module.exports = { 
module: { 
    loaders: [ 
     { test: /\.css$/, loader: "style-loader!css-loader" }, 
    ] 
    }, 
}; 

В запись файла добавить свой WebPack в:

require('bootstrap-material-design/dist/css/bootstrap-material-design.css')