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

更新@Fusion的anwser：

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

v5 已弃用：请考虑迁移到资产模块。

官方文档（https://webpack.js.org/guides/asset-modules/）明确提到：从 webpack v5 开始，raw-loader, url-loader, file-loaderloader 现已弃用并替换为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

更新：

file-loader你可能会意识到，尽管你使用的方法或asset模块，webpack 会为非 js 文件（css、scss ...）生成额外/不需要/意​​外的 js 文件，在本例中为 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文件的某些部分添加或更改。

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

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

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

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

并且您需要更改您的scss规则。请注意，该测试稍有不同，以包含.scss文件（最好是为您的scss文件.scss命名）和添加需要使用npm安装的sass-loader。“使用”数组中的加载程序以相反的顺序运行，因此先进行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"
        })
    ]
}

希望能有所帮助。