Webpack 4. 編譯scss分離css文件

Question

我試圖將 scss 編譯成一個單獨的 css 文件，但沒有運氣。 現在，css 與所有 js 代碼一起進入 bundle.js。 如何將我的 css 分離到它自己的文件中？

這是我的配置的樣子。

var path = require("path");

module.exports = {
entry: "./js/main.js",
output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/dist"
},
watch:true,
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: "babel-loader",
                options: { presets: ["es2015"] }
            }
        },
        {
            test: /\.scss$/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                },
                {
                    loader: "sass-loader"
                }
            ]
        }
    ]
}

};

Answer 1

其他答案讓我很頭疼，因為它們不起作用。 我做了很多谷歌搜索，我意識到你可以在不使用任何額外插件的情況下將scss編譯成單獨的css文件

webpack.config.js

const path = require('path');

module.exports = {
    entry: [
        __dirname + '/src/js/app.js',
        __dirname + '/src/scss/app.scss'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'), 
        filename: 'js/app.min.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [],
            }, {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'file-loader',
                        options: { outputPath: 'css/', name: '[name].min.css'}
                    },
                    'sass-loader'
                ]
            }
        ]
    }
};

包.json

{
  "name": "...",
  "version": "1.0.0",
  "description": "...",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "file-loader": "^5.0.2",
    "node-sass": "^4.13.1",
    "sass-loader": "^8.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js --mode='production'"
  },
  "keywords": [],
  "author": "...",
  "license": "ISC"
}

依賴項：

npm install --save-dev webpack webpack-cli file-loader node-sass sass-loader

如何運行JS和SCSS編譯

npm run build

Answer 2

您可以使用MiniCssExtractPlugin 。 這會將您的 css 提取到一個單獨的文件中。

您需要添加或更改 webpack.config.js 文件的幾個部分。

您需要在文件頂部添加插件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

模塊對象中還需要一個 plugins 屬性：

plugins: [
  new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]

你需要改變你的 scss 規則。 請注意，包含 .scss 文件（可能最好將您的 scss 文件命名為 .scss）和添加需要使用 npm 安裝的 sass-loader 的測試略有不同。 'use' 數組中的 loader 以相反的順序運行，因此 sass-loaded 首先進行，將 scss 轉換為 css，然后 css-loader 和提取插件再次將 css 提取到一個單獨的文件中：

{
    test: /\.s?css$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader"
    ]
}

所以我認為你的配置文件會變成這樣：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
var path = require("path");

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist"
    },
    watch:true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }
            },
            {
                test: /\.s?css$/,
                use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader",
                  "sass-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
          filename: "[name].css",
          chunkFilename: "[id].css"
        })
    ]
}

希望有幫助。

Answer 3

更新@Fusion的anwser ：

來自https://github.com/webpack-contrib/file-loader ：

已棄用 v5 ：請考慮遷移到資產模塊。

官方文檔 ( https://webpack.js.org/guides/asset-modules/ ) 清楚地提到：從 webpack v5 開始， raw-loader 、 url-loader 、 file-loader加載器現在已棄用並替換為Asset Modules ，並引入了新的 4 種模塊類型： asset/resource （取代了file-loader ）、 asset/inline 、 asset/source 、 asset 。

因此，編譯 scss 以分離 css 文件的新方法：

const path = require('path');

module.exports = {
  entry: [
    __dirname + '/src/js/app.js',
    __dirname + '/src/scss/app.scss'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: 'js/app.min.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [],
      }, {
        test: /\.scss$/,
        exclude: /node_modules/,

        type: 'asset/resource', generator: { filename: 'css/[name].min.css' },

        use: [

          { loader: 'file-loader', options: { outputPath: 'css/', name: '[name].min.css'} },

          'sass-loader'
        ]
      }
    ]
  }
};

最大的優勢是Asset Modules是一個內置的 webpack，你甚至不需要安裝任何第三個模塊。

參考：

• https://webpack.js.org/guides/asset-modules/#resource-assets
• https://webpack.js.org/guides/asset-modules/#custom-output-filename

更新：

您可能會意識到 webpack 會為非 js 文件（css、scss ...）生成一個額外的/不需要的/意外的 js 文件，盡管您使用file-loader或asset模塊的方法，在這種情況下， https://www.npmjs .com/package/webpack-fix-style-only-entries可以方便地解決這個限制。

const path = require('path');

const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

module.exports = {
  entry: [
    __dirname + '/src/js/app.js',
    __dirname + '/src/scss/app.scss'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: 'js/app.min.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [],
      }, {
        test: /\.scss$/,
        exclude: /node_modules/,

        type: 'asset/resource', generator: { filename: 'css/[name].min.css' },

        use: [
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [ new FixStyleOnlyEntriesPlugin({ extensions:['scss'] }), ],
};

Answer 4

您應該使用 npm 中的node-sass 。

如果你使用 webpack 來捆綁你的網站，你應該遵循以下步驟：

npm install node-sass

在 package.json 部分腳本中添加以下內容：

scripts: {
   "scss": "node-sass --watch src -o src"
}

第一個src是sass文件的位置， -o src是將提供css文件的輸出路徑。