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

Posted 2023-02-22

【中文标题】Webpack 4. 编译scss以分离css文件

【英文标题】：Webpack 4. Compile scss to separate css file

【发布时间】：2018-10-27 22:03:52

【问题描述】：

我试图将 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"
                
            ]
        
    ]

;

【参考方案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

【讨论】：

非常感谢！为了解决这个问题，我已经旋转了好几个小时。 css-loader 给了我各种各样的问题，互联网上没有任何帮助。谢谢！！

谢谢！！！最后一个实际上完全按照要求工作的答案。我花了几天时间解决这个问题！

哇！非常感谢队友。我想搜索这个好几个星期。我就像 webpack 不提供这个一样。甚至文档也说只能给出一个输出。最后好！或者我正要添加 gulp

【参考方案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"
        )
    ]

希望对您有所帮助。

【讨论】：

明白。当你安装了 npm 模块后，你如何让它真正工作？我的意思是，您将如何更改 webpack 文件？

谢谢！它帮助了我一点，但它没有创建任何 css 文件。我已经更新了帖子中的代码。

@fortyfiveknots 嗯，好的。我稍后再看，但直到今天晚上。你有任何错误吗？

@fortyfiveknots 我已经更新了我的答案。我从来没有让装载机完全正确。

可以在没有 mini-css-plugin 的情况下完成。请在此处查看我的问题的答案***.com/questions/55035376/…

【参考方案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'] ),
  ],
;

【参考方案4】：

你应该使用来自 npm 的node-sass。

如果您使用 webpack 来捆绑您的网站，您应该按照以下步骤操作：

npm install node-sass

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

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

第一个src 是sass 文件的位置，-o src 是将提供css 文件的输出路径。