Webpack 第4页。编译SCS以分离css文件

我试图将SCS编译成一个单独的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"
                }
            ]
        }
    ]
}

})

您可以使用。这将把css提取到一个单独的文件中

您需要添加或更改webpack.config.js文件的几个部分

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

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

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

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

您需要更改您的scss规则。注意，该测试略有不同，包括.scss文件（最好将您命名为scss files.scss）和您需要使用npm安装的sass加载程序。“use”数组中的加载程序按相反顺序运行，因此加载的sass首先将scs转换为css，然后是css加载程序，然后是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"
        })
    ]
}

---

希望这能有所帮助。

其他答案让我头疼，因为它们不起作用。我在谷歌上搜索了很多次，我意识到你可以将

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 run build

依赖关系：

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

如何运行JS和SCSS编译

{
  "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 run build

---

您应该使用npm中的

节点sass

如果您正在使用webpack捆绑您的站点，则应遵循以下步骤：

npm安装节点sass

在package.json部分中，脚本添加以下内容：

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

---

第一个

src

是

sass

文件的位置，

-o src

是提供

css

文件的输出路径。

要更新@Fusion，请执行以下操作：

发件人：

<强> V5 < /强>：请考虑迁移到<强>资产模块< /强>

官方文件（）明确提到：从webpack v5开始，

原始加载程序

，

url加载程序

，

文件加载程序

加载程序现在已被删除并替换为资产模块，以及新的4种模块类型：

资产/资源

（替换

文件加载程序

），

资产/内联

，

资产/来源

，

资产

介绍

因此，编译SCS以分离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'
        ]
      }
    ]
  }
};

---

理解。当您安装了npm模块后，如何使其实际工作？我的意思是，你将如何更改网页文件？谢谢！它帮助了我一点，但它没有创建任何css文件。我已经更新了帖子中的代码。@fortyfiveknots-hmm，好的。我晚点再看，但要等到今晚。你有什么错误吗？@fortyfiveknots我已经更新了我的答案。我从来没有完全正确的加载程序。它可以在没有迷你css插件的情况下完成。请看我问题的答案，谢谢！我已经转了好几个小时的轮子，试图把它整理好；css加载器给了我各种各样的问题，互联网上没有任何帮助。谢谢谢谢最后是一个完全符合要求的答案。我在这个问题上花了好几天时间！