标签: node-sass

我正在尝试使用，node-sass-middleware但它没有创建.css我的.scss文件。

我的文件结构（简化）是

- 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'));

我不知道为什么这不起作用。这是非常令人沮丧的。

我正在努力根据以下内容在docker容器中获取webpack开发服务器设置 node:latest

尽管尝试了Node Sass中的所有各种错误，都无法找到适合您当前环境的绑定，但我仍然遇到相同的错误：

web_1         | ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/sass/style.sass
web_1         | Module build failed: Error: Missing binding /prject/node_modules/node-sass/vendor/linux-x64-59/binding.node
web_1         | Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 9.x
web

这是当前

# Dockerfile
RUN yarn cache clean && yarn install --non-interactive --force
RUN rm -rf node_modules/node_sass
RUN npm rebuild node-sass

重建步骤表明已安装二进制文件并签出：

Binary found at /advocate/node_modules/node-sass/vendor/linux-x64-59/binding.node
Testing binary
Binary is fine

我也感到困惑的是

web_1         | Found bindings for the …

如何lighten( );在VueJS中使用SASS颜色功能？下面的确切代码:

<style lang="scss">
@import "../assets/variables";

.disable-primary {
  lighten( $primary, 10% );
}
</style>

但我在VS代码中遇到编译错误:

Failed to compile.
./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue- 
loader/lib/style-compiler?{"vue":true,"id":"data-v- 
8dc7cce2","scoped":false,"hasInlineConfig":false}!./node_modules/sass- 
loader/lib/loader.js?{"sourceMap":true}!./node_modules/vue- 
loader/lib/selector.js?type=styles&index=1!./src/components/Home.vue
Module build failed: 
lighten( $color-primary, 10% );
^
  Property "lighten" must be followed by a ':'

我已经更新了laravel-mix到版本4.0.12,面对*.scss在我使用相对路径包含背景图像的线上的破坏构建

我有一个下一个文件结构

resources/
|-assets/
||-img/
|||-background.png
||-sass/
|||-footer.scss

我在footer.scss中的代码是下一个

.footer {
  background-image: url(../img/background.png)
}

我的webpack.mix.js是下一个

const mix = require('laravel-mix');

const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';

mix
  .copy(`${resourcesAssets}images`, `${dest}images`, false)
  .sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);

在筹备期间,npm run prod我得到了

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file://C:\xampp\htdocs\laravel-project\resources\assets\sass\footer.scss:2:3
at encodeError (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:218:12) …

我遇到了很多人都遇到的错误，并认为我在这里找到了解决方案。本质上，这是说我的node版本与node-sass版本不兼容。很多人都遇到了同样的问题，所以我相信链接会有所帮助。但是，当我运行 npm install node-sass@4.14.1 时，出现不同的错误。我知道这必须是一些简单的修复，但我找不到它！有人明白这是怎么回事吗？

npm ERR! code 1
npm ERR! path C:\Users\reaga\Desktop\bestconnect-react\my-app\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c "node scripts/build.js"
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\reaga\Desktop\bestconnect-react\my-app\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   'C:\\Program Files\\nodejs\\node.exe',
npm ERR! gyp verb cli   'C:\\Users\\reaga\\Desktop\\bestconnect-react\\my-app\\node_modules\\node-gyp\\bin\\node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli …

更新- 主线程帖子底部的解决方案 -

样式.scss

@import "./material";

$pace-red: #bb2d1c;
$green: #008000;
$red: #f00;
$black: #000;

body {
  margin: 0;
}
...

自定义主题 - Material.scss

@use '~@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

$core-app-primary: mat.define-palette(mat.$red-palette, A700);
$core-app-accent: mat.define-palette(mat.$blue-palette, 500);
$core-app-warn: mat.define-palette(mat.$amber-palette, 800);
$core-app-theme: mat.define-light-theme($core-app-primary, $core-app-accent, $core-app-warn);

@include mat.all-component-themes($core-app-theme);
...

我收到一条错误消息，指出由于 @use，它无法构建模块。我也尝试过使用@use '~@angular/material' as mat;，但这并没有改变错误。

包.json

{
  "name": "xxxxx-core-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng-high-memory": "node --max_old_space_size=8000 ./node_modules/@angular/cli/bin/ng",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test", …