Webpack 无法编译 Sass 文件。

Question

Webpack 无法编译 Sass 文件。

5

我正在尝试编译所有的`.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

有人知道发生了什么事吗？！

编辑

忘记说明我是在服务器端执行此操作！

- James111

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thitemple · Accepted Answer

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

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

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