node-sass-middleware沒有做任何事情

Question

我正在嘗試使用node-sass-middleware，但它並未創建我的.scss文件的.css。

我的文件結構（簡體）是

- node-modules 
- public 
    |- common 
    |  |-sass 
    |  |  |-style.scss 
    |  |-css 
- server.js 

和server.js代碼有

var cssLoc = __dirname + "\\public\\common\\css"; 
var cssDest = __dirname + "\\public\\common"; 
console.log(cssLoc); 
console.log(cssDest); 
app.use(sass({ 
    src: cssLoc, 
    dest: cssDest, 
    debug: true, 
    outputStyle: 'compressed' 
})); 

app.use(express.static(__dirname + '/public')); 

我不知道爲什麼，這是行不通的。這是非常令人沮喪的。

Answer 1

非常有可能的原因是它不工作是因爲容易混淆的節點薩斯中間件將其SRC和DEST屬性所指定的路徑，然後看看當地CSS文件引用您的html標籤，抓住它們參考的路徑，然後在src和dest指定的路徑中查找確切的路徑。

實施例（在app.js文件）：

var nodeSassMiddleware = require('node-sass-middleware'); 

app.use(nodeSassMiddleware({ 
    src: path.join(__dirname, 'assets'), 
    dest: path.join(__dirname, 'public') 
}); 

在鹼的html文件

然後包含一個鏈接標記，像這樣：

<link rel="stylesheet" type="text/css" href="/immediate/style.css"

節點薩斯中間件將查找/assets/immediate/style.scss並將該文件輸出到/public/immediate/style.css

一旦你意識到發生了什麼，它確實非常漂亮:)，在控制檯中啓動服務器並訪問瀏覽器中的鏈接，然後控制檯將記錄正在使用的實際源和目標路徑。

把我的頭撞到牆上一會兒，弄清楚這一點，希望它有幫助！

Answer 2

使用具有以下目錄結構最初的例子：

- node-modules 
- public 
    |- common 
    |  |-sass 
    |  |  |-style.scss 
    |  |-css 
- server.js 

在server.js，你在呼喚它看起來像你必須設置src和dest性質不當node-sass-middleware。例如，

var cssLoc = __dirname + "\\public\\common\\css"; 

正在被用來填充src屬性應該是路徑到* .scss文件，而是指向你的CSS目標目錄。同樣，dest財產，

var cssDest = __dirname + "\\public\\common"; 

是不是指向CSS目錄，但它的父。

在sass-node-middleware塊你有debug: true集，所以你應該能夠查看從那裏您啓動的應用程序控制臺使用的路徑，以驗證它們是否正確與否：

app.use(sass({ 
    src: cssLoc, 
    dest: cssDest, 
    debug: true, 
    outputStyle: 'compressed' 
})); 

這可能是重構爲：

app.use(sass({ 
    src: path.join(__dirname, 'public', 'common', 'sass'), 
    dest: path.join(__dirname, 'public', 'common', 'css'), 
    debug: true, 
    outputStyle: 'compressed' 
})); 

，應該讓你的SASS編譯到CSS，但由SirRodge前面的答覆中提到你仍然有解決的CSS的的get請求路徑。如果您使用的是express.static內置中間件，app.use(express.static(path.join(__dirname, 'public')));從一個名爲public目錄服務文件，並在你的HTML你引用的發言權/common/css/style.css，那麼你需要的prefix屬性添加到中間件的CSS：

app.use(sass({ 
    src: path.join(__dirname, 'public', 'common', 'sass'), 
    dest: path.join(__dirname, 'public', 'common', 'css'), 
    debug: true, 
    outputStyle: 'compressed', 
    prefix: '/common/css' 
}));