Webpack 4. 编译scss分离css文件 [英] Webpack 4. Compile scss to separate css file

问题描述

我试图将 scss 编译成一个单独的 css 文件，但没有运气.现在，css 与所有 js 代码一起进入 bundle.js.如何将我的 css 分离到它自己的文件中?

Im trying to compile scss into a separate css file with no luck. As it is now the css gets into the bundle.js together with all js code. How can i separate my css into its own file?

这是我的配置的样子.

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

};

推荐答案

其他答案让我很头疼，因为它们不起作用.我做了很多谷歌搜索，我意识到你可以将 scss 编译成单独的 css 文件，而无需使用任何额外的插件

Other answers gave me just headache as they were not working. I did a lot of googling and I realized you can compile scss into separate css file without using any additional plugins

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

这篇关于Webpack 4. 编译scss分离css文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！