web-dev-qa-db-ja.com

WebpackはCSSをCSSにコンパイルして縮小します

私はwebpackの初心者で、scssをcssに変換してから縮小する方法に苦労しています。

ファイル構造

 ????public
     ┣ ????dist
     ┃ ┣ ????css
     ┃ ┗ ????js
     ┃ ┃ ┗ ????adminMain.js
     ┣ ????src
     ┃ ┣ ????css
     ┃ ┃ ┃ ┣ ????admin.css
     ┃ ┃ ┃ ┣ ????admin.css.map
     ┃ ┃ ┃ ┣ ????admin.scss
     ┃ ┃ ┃ ┣ ????main.css
     ┃ ┃ ┃ ┣ ????main.css.map
     ┃ ┃ ┃ ┗ ????main.scss
     ┃ ┗ ????js
     ┃ ┃ ┗ ????adminMain.js

私はこのようなjsをコンパイルしています

"dev": "webpack --mode development ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js",
"build": "webpack --mode production ./public/src/js/adminMain.js --output ./public/dist/js/adminMain.js"

sass-loaderのようなものを見つけましたが、機能させることができません。

webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "sass-loader",
                options: {
                    minimize: true
                }
            }]
        }]
    }
};

インクルードされたファイルへのパスをどこに置くか、出力へのパスをどこに置くかわかりません。

アドバイスをいただければ幸いです。

javascriptcssnode.jswebpacksass
3
Juraj Jakubov

Javascriptモジュールから.scssファイルをインポートし、それを直接DOMに適用できるようにしたい場合は、最初にこのドキュメントに従うだけです。

https://webpack.js.org/loaders/sass-loader/

そしてPostcssをミックスに追加します：

https://github.com/postcss/postcss-loader

tldr;

npm install sass-loader node-sass style-loader css-loader postcss-loader cssnano --save-dev

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', // creates style nodes from JS strings
          {
            loader: 'css-loader', // translates CSS into CommonJS
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader', // post process the compiled CSS
          'sass-loader' // compiles Sass to CSS, using Node Sass by default
        ]
      }
    ]
  }
};

// postcss.config.js
module.exports = {
  plugins: {
    'cssnano': {}
  }
};

コンパイル済みのCSSを別のファイルに抽出する場合は、次の方法があります。

https://github.com/webpack-contrib/mini-css-extract-plugin

特に：

https://github.com/webpack-contrib/mini-css-extract-plugin#advanced-configuration-example

1
madflow