CSS 文件不是用 webpack 创建的答案

【问题标题】：CSS file don't not create with webpackCSS 文件不是用 webpack 创建的
【发布时间】：2016-09-17 16:33:12
【问题描述】：

我使用 webpack，我想用 SASS 生成我的 CSS 文件。

所以我添加了 css-loader 和 sass-loader。但是，webpack 不会创建我的 CSS 文件夹。我的 webpack 配置：

const webpack = require('webpack'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './js/app.js',
    output: {
        path: './public',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loaders: ExtractTextPlugin.extract(["style", "css", "sass"])
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css'),
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                server: { baseDir: ['./'] }
            }
        )
    ]
}

你有什么想法吗？

谢谢！

【问题讨论】：

标签： css sass webpack

【解决方案1】：

plugins 应该是根属性，而不是 module 的属性。

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

module.exports = {
    entry: './js/app.js',
    output: {
        path: './js',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css')
    ]
}

【讨论】：

嗨 riscarrott，我试过了，但没有结果，CSS 文件不是用你的配置生成的
@StéphaneR。我认为您可能也需要样式加载器，并且提取文本插件采用文件名，而不是路径（它的路径由上面的输出选项确定）github.com/webpack/…
@StéphaneR。此外，在定义 scss 加载程序时，您使用的是 loaders 而不是 loader
也没有结果，我已经用我的实际配置编辑了我的第一篇文章:(
这几乎是一个找不同的游戏，但我认为这是最后一个问题——ExtractTextPlugin.extract(["style", "css", "sass"]) 应该是ExtractTextPlugin.extract("style", "css!sass")。

【解决方案2】：

你可以使用 style!css!sass 加载器。只需使用 npm 安装它们并在 webpack.config 中设置以下配置。

{
   test: /\.scss$/,
   loader: 'style!css!sass?sourceMap'
}

您最终的 webpack.config 应该如下所示：

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

module.exports = {
    entry: './js/app.js',
    output: {
        path: './js',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
              test: /\.scss$/,
              loader: 'style!css!sass?sourceMap'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

现在您的 CSS 应该已正确捆绑。

【讨论】：

将第一个 loader 替换为 rules，将第二个 loader 替换为 use。它们是新版本。

【解决方案3】：

您必须在某个地方导入 scss 文件，例如您的 index.js 或 App.js：

例如import './sass/main.scss';

【讨论】：