CSS 文件不是用 webpack 创建的

Posted 2023-03-06

【中文标题】CSS 文件不是用 webpack 创建的

【英文标题】：CSS file don't not create with 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: ['./'] 
            
        )
    ]

你有什么想法吗？

谢谢！

【参考方案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';