标签: node-sass

所以我正在建立一个新项目,我想通过npm使用Bourbon来scss.这需要做npm install bourbon,然后在编译时以某种方式将路径传递给node-sass.

我当前的sass脚本如下所示:

node-sass --output-style compressed -o build/css/ scss/

和波旁文档表明,我需要做的是这样的:

require("bourbon").includePaths

但是我如何通过命令行执行此操作？

我正在使用 bootstrap-sass。节点模块已安装。我应该期望我可以在任何 .scss 文件中使用以下行导入到适当的工作表中

@import 'bootstrap';

我的理解是编译器会爬行直到找到 package.json，跳入 node_modules 并找到合适的包。相反，我收到以下错误。

错误：未找到或无法读取要导入的文件：bootstrap

如果我用如下所示的完全限定路径替换我的导入，那么一切都会正常进行。

@import '../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

我正在使用 gulp-sass 进行编译。猜测我只是关闭了一些小的配置位，但我无法弄清楚它是什么。

我有这样的结构:

- folder1
  - styles1.scss

- folder2
  - styles2.scss

我需要运行node-sass 在命令行中生成以下:

- folder1
  - styles1.scss
  - styles1.css

- folder2
  - styles2.scss
  - styles2.css

这些文件夹最终将会很多.所以我希望将所有单个文件编译到其.scss文件旁边的CSS中.

目前我有:

"sass:build": "node-sass src/app/**/*.scss -o src/app/"

但这只是将内容直接放入src/app,无论内部文件夹的深度src/app 如何？

我使用 browserify 转换我的代码现在在导入 sass 文件时出错

@import 解析错误

任何人都可以帮我解决这个问题如何使用和集成

我正在设置一个 package.json 文件，该文件将启动 Nodemon、运行我的 watch css 命令并使用“npm start”命令运行浏览器同步。

这适用于我工作时的 Mac 计算机，但不适用于我家中的 Windows 计算机。

在我的 Mac 上，它将监听服务器和 SCSS 文件的任何更改，并运行浏览器同步。

在 Windows 上，它仅运行 Nodemon 并等待任何服务器更改。看起来它忽略了我的其他两个命令。

我需要为 Windows 做一些不同的事情吗？理想情况下，我希望代码能够在两个平台上通用。

Nodemon 似乎是这里的问题，因为 watch-css css 和 browsersync 可以工作，但 nodemon 之后的任何内容都不起作用。

"scripts": {
  "build-css": "node-sass --output-style compressed --source-map true -o public/css scss",
  "watch-css": "nodemon -e scss -x \"npm run build-css\"",
  "build-js": "browserify js/app.js -o public/js/app.js",
  "browser-sync": "browser-sync start --port 4000 --proxy 'localhost:3000' --files 'views/*' 'public/**/*' --no-notify",
  "start": "nodemon ./bin/www & npm run watch-css & npm run …

我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置；

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
    },
  }
}

但我不知道将该代码放在 Nuxt.js 中的何处。

我目前正在学习 sass/scss，并且正在尝试为实践项目设置 webpack 配置。所以我查找了我需要的工具和技术，一些资源建议我使用“node sass、sass-loader 和 css-loader”（webpack 文档），而另一个资源建议我使用 post-CSS 而不是 css-loader。我想知道其中的区别。

我有一个简单的汇总项目，其结构如下

src
  index.mjs
  style.sass
package.json
rollup.config.mjs

在我的汇总文件中，我创建了这样的插件......

const pcss = postcss({
    preprocessor: (content, id) => new Promise((resolve, reject) => {
      const result = sass.renderSync({
        file: id,
        includePaths: ["src", "node_modules"]
      })
      resolve({ code: result.css.toString() })
    }),
    plugins: [
      autoprefixer
    ],
    extensions: ['.sass', '.scss']
})

然后我在我的 sass 文件中进行简单的导入，如下所示......

@import "@material/button/mdc-button";

但是当我运行这个时我得到...

Error: File to import not found or unreadable: @material/button/mdc-button.
  at options.error (/Users/jackiegleason/Code/jrg-material/packages/components/node_modules/node-sass/lib/index.js:291:26)

如果我改为

@import "~@material/button/mdc-button";

我和...更近了一点

错误：找不到或无法读取要导入的文件：@material/elevation/mixins。

如何让它识别没有扩展名的文件以便其他导入工作？

我真的是 Sass 的新手，在从部分样式表导入变量时遇到了问题。我认为这很简单，但似乎并非如此。

我在反应组件中使用这个样式表，像这样导入：

import '../stylesheets/Table.scss';

实际的样式表（经过简化，但有相同的错误）如下所示：

@use 'colors.scss';

.datatb-container {

    background-color: colors.$table-bg;
    border: 2px solid colors.$table-border;

    border-radius: 2px;
    padding: 1.2%;
    max-width: 40rem;
}

我的变量所在的文件名为_colors.scss，在与 相同的目录中Table.scss，如下所示：

// App colors
$highlight: rgb(197, 145, 0);

// Table colors
$cell-bg: white;
$table-bg: gainsboro;

$cell-border: gray;
$table-border: black;

当我运行 React 时，出现以下错误：

SassError: Invalid CSS after "...ound-color: color": expected expression (e.g. 1px, bold), was ".$table-bg;"
        on line 4 of ./src/stylesheets/Table.scss
>>     background-color: color.$table-bg;

我已经尝试更改目录，以不同方式使用变量，使用 更改命名空间@use 'colors' as {smth}，但我总是收到错误消息。

我究竟做错了什么？

我的项目正在运行node-sass，但我决定将其更改为sass（dart-sass），因为我想避免安装python、g++并make只是为了运行npm install，而node-sass会因为node-gyp而强制你这样做。

所以我跑了

$ npm uninstall node-sass\n$ npm install sass\n

运行npm run build( vue-cli-service build) 工作正常，但我的持续集成在npm run test:unit( vue-cli-service test:unit) 上失败。

这是完整的错误：

 FAIL  tests/unit/example.spec.ts\n\xe2\x97\x8f Test suite failed to run[vue-jest] \nError: You are trying to use "scss". node-sass is missing.\n\n    To install run:  \nnpm install --save-dev node-sass\nat error (node_modules/vue-jest/lib/throw-error.js:2:9)\nat module.exports (node_modules/vue-jest/lib/ensure-require.js:38:5)                                                                                                                                                                     at module.exports (node_modules/vue-jest/lib/compilers/scss-compiler.js:20:3)\nat processStyleByLang (node_modules/vue-jest/lib/process-style.js:11:82)\nat processStyle (node_modules/vue-jest/lib/process-style.js:20:17)\nat node_modules/vue-jest/lib/process.js:93:13\nat Array.map (<anonymous>)\nat Object.module.exports [as process] (node_modules/vue-jest/lib/process.js:90:8)\nTest Suites: 1 failed, 1 total\nTests: …