Question

我有以下webpack文件，但是，当我运行npm run dev时，name.bundle.css文件没有生成:(也没有错误）

docker inspect $(sudo docker ps | grep wiremocktest_microservice.gateway | head -c 12) | grep -e \"IPAddress\"\:[[:space:]]\"[0-2] | grep -o '[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}\.[0-9]\{1,3\}'

我的CSS文件夹是：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, './resources/'),
    entry: {
        app: './index.jsx'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './public/assets/'),
        publicPath: '/assets/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use:  ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader'
                    }],
                }),
            },
            {
              test: /\.jsx|js$/,
              exclude: [/node-modules/],
              use: [
                {
                  loader: "babel-loader",
                  options: { presets: ['react', 'es2015', 'stage-1'] }
                }
              ]
            },
            {
              test: /\.(sass|scss)$/,
              use: ["style-loader", "css-loader", "sass-loader"]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?name=[name].[ext]']
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=public/fonts/[name].[ext]'
            }
        ]
    },
    resolve: {
        modules: [ 
            path.resolve(__dirname, './resources/'),
            'node_modules'
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        }),
        new ExtractTextPlugin({
            filename: '[name].bundle.css'
        })
    ]
}

以这种方式工作＆＃34;从＆＃39; ./ css / app.scss＆＃39;;＆＃34;导入样式但我希望这会产生一个app.bundle.css：

CSS
    - app.scss
    COMPONENTS
        comp1.scss
        comp2.scss

Answer 1

css和sass都有2条规则。

我认为在你的情况下你只需要一个：

test: /\.(sass|scss)$/,
use: ExtractTextPlugin.extract({
     use: [{
         loader: "css-loader"
     }, {
         loader: "sass-loader"
     }],
     fallback: "style-loader"
})

和你说的一样，你应该在js文件import './css/app.scss'

中导入scss文件

Webpack没有生成app.bundle.css

1 个答案: