Question

我创建了一个带有角度材质2组件的angular2项目。现在我想自定义我的主题所以我使用了webpack模块，因为这将从所有scss文件创建一个单独的文件，因此我使用extract-text-webpack-plugin创建单个文件。

这是我的 webpack.config.js

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// multiple extract instances
let extractCSS = new ExtractTextPlugin('[name].css');

module.exports = {
    entry: [
        '/src/assets/theme/'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'index.js',
        publicPath: '/dist/'
    },

    module: {
        loaders: [
            { test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) }
        ]
    },
    plugins: [
        extractCSS
    ]
}

这是我的package.json中的脚本

"build:css": "webpack --config webpack.config.js"

和要运行的命令

npm run build:css

但是显示

> webpack --config webpack.config.js

Hash: a5e945c400552ce5350f
Version: webpack 3.3.0
Time: 68ms
   Asset    Size  Chunks             Chunk Names
index.js  2.6 kB       0  [emitted]  main
   [0] multi /src/assets/theme/ 28 bytes {0} [built]

ERROR in multi /src/assets/theme/
Module not found: Error: Can't resolve '/src/assets/theme/' in 'D:\Workspace\WebAdmin_Blade_Template_Material2\webapp'
 @ multi /src/assets/theme/

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:css"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! webapp@1.0.0 build:css: `webpack --config webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webapp@1.0.0 build:css script 'webpack --config webpack.config.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the webapp package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --config webpack.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webapp
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls webapp
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:

问题在于entry，但无法解决此问题？问题是什么？我错过了什么吗？

被修改

我在src / assets / theme /中缺少 index.js 。以下是此文件的内容

require('./theme.scss');
require('./custom.scss');

并安装了css-loader和sass-loader。

让这项工作改变

loaders: [
                { test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) }
            ]

而不是CSS和sass到css-loader和sass-loader。

问题是，它是从/dist/main.css文件中的所有sccss文件创建一个单独的文件。如何为每个scss文件创建单独的文件？

如何使用带有extract-text-webpack-plugin的webpack将scss文件编译为css

0 个答案: