Tag: sass

在package.json中包含波旁path?

如何将波本(通过npm安装)的path包含在节点项目的package.json中? 我见过的所有例子都是通过grunt等等: var bourbon = require('node-bourbon'); bourbon.includePaths // Array of Bourbon paths 任何人都知道如何做到这一点,以便以下将在SASS文件中工作? @import 'bourbon'; 目前的SASS编译是我们构build中的一个步骤,如下所示: "scripts": { // Need to import bourbon npm package as sass before /scss directory "sass": "node-sass -o build/css/ scss/" }

“错误:未findlibsass绑定…”在nodejs中4.2.4 lts但不是5.4.1使用docker

我正在使用nodejs 4.2.4和expressjs使用sass来设置docker容器。 我的Dockerfile: FROM node:4.2.4-wheezy COPY myapp /srv/www/ RUN rm -r /srv/www/node_modules || echo "Not removing /srv/www/node_modules, directory did not exist" #RUN npm update #RUN npm install -g –silent node-sass RUN cd /srv/www && npm install –silent #RUN cd /srv/www && npm rebuild node-sass EXPOSE 3000 express.js项目是使用其生成器生成的 express -css sass –hbs myapp 用这个package.json生成一个框架项目: { "name": […]

如何在Webpack中重新加载sass?

任何机构知道configurationwebpack文件热重新加载sass文件? 这里是我的webpack.config文件,它只是支持HTML和JavaScript热reload.I急于使用sass热重载! 救命!救命! 这里是我的webpack.config var ExtractTextPlugin = require('extract-text-webpack-plugin') var webpack = require('webpack') var path = require('path') module.exports = { entry: [ './src/main.js', ], output: { path: path.resolve(__dirname, 'build'), publicPath: '/build/', filename: 'build.js' }, module: { loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.js$/, loader: 'babel', exclude: /node_modules/, }, { test: /\.(png|jpg|gif)$/, loader: […]

与webpack的Scss提取

我正在尝试使用ExtractTextPlugin提取并将我的scss转换为css,并将其与client.min.js一起移动到src文件夹中,但构buildwebpack.config.js文件时目前正在获取以下问题: ./scss/styles.js中的错误未find模块:错误:无法parsingC:\ Users \ ajoku \ Desktop \ Web Projects \ learn2node \ http \ scss @ ./scss/styles.js中的模块“main.scss” :0-20 我的webpack.config.js文件: "use strict"; var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); let ExtractTextPlugin = require('extract-text-webpack-plugin'); let extractSCSS = new ExtractTextPlugin('./scss/main.scss',{allChunks: true}); module.exports = { context: path.join(__dirname, "http"), devtool: debug ? […]

避免在本地开发环境中使用多个node_modules

我使用node和gulp来编译SASS,缩小javascript,复制文件等。但是,由于我在本地开发环境(OSX)上有100多个项目,我开始想知道为什么我需要300个NPM软件包(40MB,7000文件!)在我开始的每一个项目。 那就是当我只是安装一口酒和一口酒的时候。 当然有更好的方法来使用节点/ gulp / sass。 我曾尝试使用像罗盘和Codekit的GUI工具,但我喜欢与Gulp一起工作,我喜欢从命令行工作。 有什么build议么?

使用node-sass-jspm-importerpathconfiguration

我试图让我的头在这个sassimport: https : //github.com/idcware/node-sass-jspm-importer 我不完全确定我正在尝试正确使用它。 我试图使用它来导入字体真棒的例子。 GitHub页面提供了下面的例子 gulp.task('build-sass', function() { return gulp.src('src/sass/*.scss') .pipe(sass({ errLogToConsole: true, functions: sassJspm.resolve_function('/lib/'), importer: sassJspm.importer })) .pipe(gulp.dest('dist/css')); }); 在这个例子中,我不确定这个部分有多less轴承: gulp.src( 'SRC / SASS / *。SCSS') 如果要从JSPM包中导入SASS / SCSS文件,这个path有什么意义呢? jspm_packages/npm/font-aweesome@4.6.3/scss 本节中的lib文件夹 函数:sassJspm.resolve_function('/ lib /'), 应该是/ jspm_packages /因为在它指定的文档 其中/ lib /是您的文档根目录中的jspm_packages文件夹的path。 在这种情况下,他们为什么不只是指定jspm_packages?

节点sass中间件不使用快速渲染

我遇到了一个问题,那就是node-sass-middleware没有渲染我的css,这里是我的中间件代码: // adding the sass middleware app.use(sassMiddleware({ /* Options */ src: path.join(__dirname, "public/sass"), dest: path.join(__dirname, "public/css"), debug: true, outputStyle: 'compressed', prefix: '/static/css' // Where prefix is at <link rel="stylesheets" href="prefix/style.css"/> })); app.use(express.static(path.join(__dirname, 'public'))); 我在控制台上得到这个: source: ~\public\sass\style.scss dest: ~\public\css\style.css read: ~\public\css\style.css 但是,CSS文件从来没有呈现,网站没有收到文件。 这是我从package.json依赖列表更多的信息: "dependencies": { "ejs": "~2.5.2", "express": "~4.14.0", "node-sass": "^3.13.0", "node-sass-middleware": "^0.10.0" } 编辑,如果我删除前缀线我得到: source: […]

从NPM脚本获取stdout到一个variables

我有这个节点脚本parsing.YAML并输出一个名为版本的字段 node node/getAssetsVersion.js => "2.1.2" 我试图把这个stdout变成一个variables,并在NPM脚本中使用它 这就是我想在我的package.json中做的事情: "scripts": { "build": "cross-env VERSION=\"$(node node/getAssetsVersion.js)\" \"node-sass –include-path scss src/main.scss dist/$VERSION/main.css\"" } 谢谢!

webpack postcss-loader在传递函数时不工作

我正在从一个webpackconfiguration中repo removed 。 现在当我运行npm run teststart (使用webpack.development.js )或npm run testbuild (使用webpack.production.js )时,postcss加载器stylelint,autoprefixer和postcss-focus似乎不起作用。 但是,如果我将一个数组而不是form()=> []的函数传递给postcss-loader的插件,它确实可行。 所以例如,如果我改变 options: { plugins: () => [require('autoprefixer'), require('postcss-focus')] } 至 options: { plugins: [require('autoprefixer'), require('postcss-focus')] } 在webpack.production.js它的作品。 但在另一个项目中,函数格式正常工作。 试图找出为什么它不在这里工作。

用gulp编译时出错

我正在使用Laravel Elixr和Laravel混合 ,如下图所示并编译scss文件 OS = Windows 10 节点-v = v6.11.0 npm –v = 5.0.3 +– laravel-elixir@6.0.0-15 | `– gulp-sass@2.3.2 | `– node-sass@3.13.1 `– laravel-mix@0.11.4 `– node-sass@4.5.2 和错误是无法find模块“克隆可读”,如下所示 > [05:51:53] Using gulpfile D:\www\fevrok.com\gulpfile.js > [05:51:53] Starting 'all'… > [05:51:53] Starting 'sass'… > [05:51:54] 'sass' errored after 713 ms > [05:51:54] Error: Cannot find module 'cloneable-readable' > […]