更新：

Question

我试图将scss编译成一个单独的css文件而没有运气。因为它现在是css与所有js代码一起进入bundle.js。如何将我的CSS分成自己的文件？

这是我的配置的样子。

cv2

}

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

更新 @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模块，以及新的 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，你甚至不需要安装任何第三个模块。

参考：

更新：

你可能会意识到 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 3

您需要使用MiniCssExtractPlugin。这会将你的css提取到一个单独的文件中。

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

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

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

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

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

你需要改变你的scss规则。请注意，测试略有不同，包括.scss文件（可能最好用scss文件命名.scss）以及添加你需要用npm安装的sass-loader。 'use'数组中的加载器以相反的顺序运行，因此首先加载sass，将scss转换为css，然后使用css-loader然后解压缩插件将css再次提取到一个单独的文件中：

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"
        })
    ]
}

所以我认为您的配置文件将更改为：

${variable}

希望有所帮助。

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

Webpack 4.编译scss以分离css文件

4 个答案:

更新：