Question

我在package.json

中有这个模块

{
 "name": "v1.0",
 "version": "1.0.0",
 "description": "",
 "main": "app-main.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
},
 "author": "",
 "license": "ISC",
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-es2015": "^6.24.1",
   "css-loader": "^0.28.7",
   "extract-text-webpack-plugin": "^3.0.1",
   "node-sass": "^4.5.3",
   "sass-loader": "^6.0.6",
   "style-loader": "^0.19.0",
   "webpack": "^3.8.1"
},
"dependencies": {
   "jquery": "^3.2.1"
  }
}

`

我的js包正在运行，但是我不能编译为1个包的样式。 main.bundle.css。这是我的webpack.config.js

const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
    'app-main'   : './assets/js/app-main.js',
    'vendor-main': './assets/js/vendor-main.js'
},
output: {
    path: path.resolve(__dirname, './js'),
    filename: '[name].bundle.js'
},
module: {
    rules: [{
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "sass-loader",
            options: {
                includePaths: ["css/scss/main.scss"]
            }
        }]
    }],

    loaders: [
        {
            exclude: /node_modules/,
            loader: 'babel-loader'
        }
    ]
},
plugins: [
    new ExtractTextPlugin({
        filename: 'css/[name].bundle.css',
        allChunks: true,
    }),
]

};

当我启动webpack时，我没有任何错误，我的js包正在运行，但不是。我怎么解决这个问题？

Answer 1

您在加载器规则中缺少对提取函数的调用：

const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: {
        'app-main': './assets/js/app-main.js',
        'vendor-main': './assets/js/vendor-main.js'
    },
    output: {
        path: path.resolve(__dirname, './js'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                    options: {
                        includePaths: ["css/scss/main.scss"]
                    }
                }]
            })
        }],
        loaders: [
            {
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].bundle.css',
            allChunks: true,
        }),
    ]
};

还有一件事不要忘记在.scss文件中要求.js个文件。

如何在webpack中编译样式

1 个答案: