Webpack 不编译 sass 文件答案

【问题标题】：Webpack not compiling sass filesWebpack 不编译 sass 文件
【发布时间】：2016-07-26 05:28:32
【问题描述】：

我正在尝试编译我所有的 .scss 文件，但 webpack 似乎没有这样做，即使我已经在我的 webpack 配置文件中声明了 style-loader & sass-loader。

我不明白为什么.scss 文件无法编译？我遵循了以下博客中的指南：http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass.html

装载机：

loaders: [
            // Working loaders...
            {test: /\.json$/, loaders: ["json"]},
            {test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/, loaders: ["file?context=static&name=/[path][name].[ext]"], exclude: /node_modules/},
            {test: /\.js$/, loaders: ["babel?presets[]=es2015&presets[]=stage-0&presets[]=react"], exclude: /node_modules/},
            
            // Non working loaders...
            // ALSO TRIED THIS -> { test: /\.scss$/,loader: ExtractTextPlugin.extract( "style", 'css!sass')}
            { test: /\.css$/, loader: ExtractTextPlugin.extract(
                "style-loader",
                "sass-loader?sourceMap",
                {
                    publicPath: "../dist"
                }
            )},

],

style.css 永远不会在任何地方生成。

插件：

plugins: [
    new ExtractTextPlugin("style.css", {
       disable: false,
       allChunks: true
    }),
]

也试过了：

以下内容是从我上面链接的博客中复制的。

装载机：

  {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract('css!sass')
  }

插件：

new ExtractTextPlugin('public/style.css', {
     allChunks: true
 })

其他 webpack 配置：

这是我的其他配置。非常标准，除了 .scss 之外的所有东西都能胜任！

target:  "node",
    cache:   false,
    context: __dirname,
    debug:   false,
    devtool: "source-map",
    entry:   ["../src/server"],
    output:  {
        path:          path.join(__dirname, "../dist"),
        filename:      "server.js"
    },
externals: [nodeExternals({
        whitelist: ["webpack/hot/poll?1000"]
    })],
    resolve: {
        modulesDirectories: [
            "src",
            "src/components",
            "src/containers",
            "node_modules",
            "static"
        ],
        extensions: ["", ".json", ".js"]
    },
    node:    {
        __dirname: true,
        fs:        "empty"
    }

这是我的 webpack 终端运行后打印出来的内容：

Waiting for dist/*.js (max 30 seconds)
[2] http://localhost:8080/webpack-dev-server/
[2] webpack result is served from http://localhost:8080/dist
[2] content is served from /Users/james/apps/react-server-side/server
[0] Ready. dist/*.js changed
[1] Hash: 12a5c90bd2564cd8880d
[1] Version: webpack 1.12.14
[1] Time: 15448ms
[1]         Asset     Size  Chunks             Chunk Names
[1]     server.js  1.37 MB       0  [emitted]  main
[1] server.js.map  1.23 MB       0  [emitted]  main
[1]    [0] multi main 40 bytes {0} [built]
[1]     + 659 hidden modules

有人对发生的事情有任何想法吗？！

编辑

忘了补充说我在做这个服务器端！

【问题讨论】：

标签： css webpack webpack-style-loader

【解决方案1】：

您是否需要 js 文件中的 scss 文件？你必须这样做。

另外，您不需要 ExtractTextPlugin，如下配置应该可以工作：

loaders: [
  // ...
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  }
]

【讨论】：

不，我不需要它们！！我只是有一个链接 href=server_address/style.css 硬编码到我的脑海中。午饭回来后我会看看要求他们！
在服务器端编译脚本时不能这样做。