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'
                ]
            }
        ]
    }
};

package.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 文件的一些部分。

您需要在文件顶部 require 插件：

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

模块对象中还需要一个插件属性：

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

您需要更改您的 scss 规则。请注意，测试与包含 .scss 文件（最好将 scss 文件命名为 .scss）和添加需要与 npm 一起安装的 sass-loader 略有不同。 'use' 数组中的加载器以相反的顺序运行，因此 sass-loaded 先执行，将 scss 转换为 css，然后 css-loader 和 extract 插件将 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 加载器现在已被弃用并替换为 资产模块，以及新的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

更新：

您可能会意识到，尽管您使用 file-loader 或 asset 模块，在本例中为 @987654326 @ 可以方便地解决这个限制。

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 文件的输出路径。