的WebPack拋出錯誤「意外令牌」加載CSS

，當我試圖導入預建semantic.css到入口文件index.js，報道的WebPack：的WebPack拋出錯誤「意外令牌」加載CSS

 
ERROR in ../semantic/dist/semantic.css 
Module parse failed: /home/khoa/projects/mystack/test/semantic/dist/semantic.css Unexpected character '@' (11:0) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected character '@' (11:0)

所以我猜我錯過了一些加載器加載CSS @import url聲明。我搜索了好幾個小時，嘗試了各種裝載機，只是沒有完成這個訣竅。之後，我注意到，無論我把它放在css文件的loader字段中，結果都是一樣的。（甚至一些東西，任意擴展做工精細用生加載器）

{ 
    test: /\.css$/, 
    include: path.resolve(__dirname, '../semantic/dist'), 
    loader: 'style!css!postcss' // whatever I put here doesn't matter 
},

我試着重新啓動計算機並重新安裝所有模塊，但什麼都沒有改變。所以我想這個問題是webpack。

來源

2016-07-10 Frost Phantom

你檢查你添加的CSS文件的內容？它清楚地說明了第11行的字符'@'，所以它可能是一個導入或者webpack不喜歡的css文件中的一些註釋。 – thsorens

感謝大家，我剛剛意識到我已經解決了錯誤包含路徑，我以爲__dirname是exports.context目錄。 –

如果你在Windows上，你必須做一個工作，使路徑工作。

const path = require("path"); 
const srcPath = path.join(__dirname, 'src');

我建議您檢查ExtractTextPlugin（https://github.com/webpack/extract-text-webpack-plugin）。

的路徑添加到您的裝載機：

loaders: [ 
     {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")} 
     } 
    ]

你也需要的路徑添加到您的裝載機，我更願意做一個恆定的，但這應該工作了。

{ 
     test: /\.css$/, 
     include: path.resolve(__dirname, '../semantic/dist'), 
     loader: 'style!css!postcss&includePaths[]=' + path.resolve(__dirname, "./src") 
    },

另外補充的決心：

resolve: { 
    extensions: ["", ".js", ".css"], 
    modulesDirectories: ["src", "node_modules"], 
    root: [__dirname + path.sep + 'scripts'], 
    }

來源

2016-07-11 18:51:44

添加ExtractTextPlugin不應該與這個問題有任何關係。這將只提取構建的文件作爲一個新的CSS文件，而不是把它作爲style-tag。 – thsorens

的WebPack拋出錯誤「意外令牌」加載CSS

回答

相關問題