ꯋꯦꯕꯄꯦꯛ ꯇꯧꯕꯥ꯫

ꯋꯦꯕꯄꯦꯛ 3 ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯇꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯌꯥꯎꯍꯅꯒꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯇꯃꯁꯤꯜꯂꯨ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ꯫

npm ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ Node.js ꯃꯣꯗ꯭ꯌꯨꯜ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧ꯫

ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯑꯦꯄꯀꯤ ꯑꯦꯟꯠꯔꯤ ꯄꯣꯏꯟꯇꯇꯥ ꯂꯥꯏꯟ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯏꯝꯄꯣꯔꯠ ꯇꯧ (ꯃꯍꯧꯁꯥꯅꯥ index.jsꯅꯠꯠꯔꯒꯥ app.js):

import 'bootstrap';

ꯅꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄ꯭ꯂꯒꯏꯅꯁꯤꯡ ꯑꯃꯃꯃꯗꯥ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯌꯥꯏ :

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ jQuery ꯑꯃꯁꯨꯡ Popper ꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ , ꯍꯥꯌꯔꯤꯕꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ peerDependencies, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌ ꯑꯅꯤꯃꯛ ꯅꯍꯥꯛꯀꯤ package.jsonꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯁꯣꯏꯗꯅꯥ ꯍꯥꯄꯆꯤꯅꯒꯗꯕꯅꯤ npm install --save jquery popper.js.

ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯄ꯭ꯔꯤꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯥꯁ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯕꯥ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯄꯣꯇꯦꯟꯁꯤꯑꯦꯜ ꯑꯗꯨ ꯅꯨꯡꯉꯥꯏꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯗꯔꯀꯥꯔ ꯑꯣꯏꯕꯁꯤꯡꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯅꯕꯥ, ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯕꯟꯗꯂꯤꯡ ꯄ꯭ꯔꯣꯁꯦꯁꯀꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯣꯔꯁ ꯐꯥꯏꯂꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯑꯍꯥꯅꯕꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯏꯁꯥꯒꯤ ꯁꯦꯝꯃꯨ ꯑꯃꯁꯨꯡ ꯃꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯁꯦꯃꯒꯠꯂꯕꯥ ꯀꯁ꯭ꯇꯝ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ_custom.scss ꯑꯗꯨ ꯑꯣꯚꯔꯔꯥꯏꯗ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯧ . ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯀꯁ꯭ꯇꯝ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯏꯝꯄꯣꯔꯠ ꯇꯧꯅꯕꯥ ꯅꯍꯥꯛꯀꯤ ꯃꯔꯨꯑꯣꯏꯕꯥ ꯁꯥꯁ ꯐꯥꯏꯜ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯧ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ:

@import "custom";
@import "~bootstrap/scss/bootstrap";

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯞ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ, ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯂꯣꯗꯔꯁꯤꯡ ꯏꯅꯁ꯭ꯇꯣꯜ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯁꯤꯖꯤꯟꯅꯧ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ: sass-loader , Autoprefixerꯒꯥ ꯂꯣꯌꯅꯅꯥ postcss -loader . ꯃꯤꯅꯤꯃꯝ ꯁꯦꯇꯑꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ, ꯅꯍꯥꯛꯀꯤ ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯔꯗꯥ ꯔꯨꯜ ꯑꯁꯤ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯌꯥꯑꯣꯒꯗꯕꯅꯤ:

  ...
  {
    test: /\.(scss)$/,
    use: [{
      loader: 'style-loader', // inject CSS to page
    }, {
      loader: 'css-loader', // translates CSS into CommonJS modules
    }, {
      loader: 'postcss-loader', // Run post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            require('autoprefixer')
          ];
        }
      }
    }, {
      loader: 'sass-loader' // compiles Sass to CSS
    }]
  },
  ...

ꯀꯝꯄꯥꯏꯜ ꯇꯧꯔꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ

ꯅꯠꯔꯒꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯑꯦꯟꯠꯔꯤ ꯄꯣꯏꯟꯇꯇꯥ ꯂꯥꯏꯟ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯁꯦꯝ ꯁꯥꯕꯥ CSS ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ:

import 'bootstrap/dist/css/bootstrap.min.css';

ꯃꯁꯤꯒꯤ ꯀꯦꯁ ꯑꯁꯤꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯔꯨꯜ cssꯑꯗꯨ ꯋꯦꯕꯄꯦꯛ ꯀꯅꯐꯤꯒꯇꯥ ꯑꯈꯟꯅꯕꯥ ꯃꯣꯗꯤꯐꯤꯀꯦꯁꯟ ꯑꯃꯠꯇꯥ ꯌꯥꯑꯣꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯅꯍꯥꯛꯅꯥ sass-loaderꯁꯨꯞꯅꯒꯤ ꯁ꯭ꯇꯥꯏꯜ-ꯂꯣꯗꯔ ꯑꯃꯁꯨꯡ css- ꯂꯣꯗꯔ ꯈꯛꯇꯃꯛ ꯃꯊꯧ ꯇꯥꯗꯦ .

  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
  ...